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

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

@@ -3,39 +3,43 @@
     <button
       type="button"
       :disabled="!canSelectParent"
+      class="_bk_group/tooltip"
       @click.prevent="onClickSelectParent"
     >
       <Icon name="bk_mdi_arrow_top_left" />
-      <div class="bk-tooltip">
-        {{
-          parentLabel ? $t("actionsSelectParent", "Select parent (@label)").replace(
-  "@label",
-  parentLabel
-) : $t("actionsSelectPage", "Select page")
-        }}
-      </div>
+      <Tooltip
+        :label="
+  parentLabel ? $t('actionsSelectParent', 'Select parent (@label)').replace(
+    '@label',
+    parentLabel
+  ) : $t('actionsSelectPage', 'Select page')
+"
+        placement="above-left"
+      />
     </button>
     <button
       type="button"
+      class="_bk_group/tooltip"
       :disabled="!canMove"
       @pointerdown.stop.prevent="onMovePointerDown"
     >
       <Icon name="bk_mdi_drag_pan" />
-      <div class="bk-tooltip">
-        {{
-          selection.uuids.value.length === 1 ? $t("actionsMoveBlock", "Move block") : $t("actionsMoveBlocks", "Move @count blocks").replace(
-  "@count",
-  String(selection.uuids.value.length)
-)
-        }}
-      </div>
+      <Tooltip
+        :label="
+  selection.uuids.value.length === 1 ? $t('actionsMoveBlock', 'Move block') : $t('actionsMoveBlocks', 'Move @count blocks').replace(
+    '@count',
+    String(selection.uuids.value.length)
+  )
+"
+        placement="above-left"
+      />
     </button>
   </div>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, Tooltip } from "#blokkli/editor/components";
 import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
 const { selection, $t, state, eventBus, ui, types } = useBlokkli();
 const canMove = computed(() => {
@@ -108,3 +112,59 @@ export default {
   name: "Interactions"
 };
 </script>
+
+<style>
+.bk .bk-blokkli-item-actions-interactions {
+    position: relative;
+    height: 50px;
+    width: 25px
+}
+@media (min-width: 1024px) {
+    .bk .bk-blokkli-item-actions-interactions {
+        border-right-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-right-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
+    }
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button {
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button[disabled] {
+    pointer-events: none;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button:first-child {
+    border-top-left-radius: 6px;
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button:nth-child(2) {
+    cursor: grab;
+    border-bottom-left-radius: 6px
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button svg {
+    width: 13px;
+    height: 13px;
+    fill: currentColor
+}
+</style>

package/dist/runtime/editor/components/Actions/{ItemDropdown.vue → ItemDropdown/index.vue}

@@ -1,8 +1,5 @@
 <template>
-  <div
-    id="bk-blokkli-item-actions-dropdown"
-    class="bk-blokkli-item-actions-type-dropdown"
-  >
+  <div>
     <div
       v-for="group in groups"
       :key="group.name"
@@ -11,8 +8,8 @@
       <ol>
         <li v-for="action in group.actions" :key="action.id">
           <button
-            class="bk-blokkli-item-actions-type-dropdown-button"
-            :class="'bk-is-variant-' + action.variant || 'default'"
+            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)"
           >
@@ -23,9 +20,11 @@
             <div>
               <div>{{ action.label }}</div>
             </div>
-            <div v-if="action.description" class="bk-tooltip">
-              {{ action.description }}
-            </div>
+            <Tooltip
+              v-if="action.description"
+              :label="action.description"
+              placement="center-after"
+            />
           </button>
         </li>
       </ol>
@@ -35,7 +34,7 @@
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { ItemIcon, Icon } from "#blokkli/editor/components";
+import { ItemIcon, Icon, Tooltip } from "#blokkli/editor/components";
 const emit = defineEmits(["close"]);
 const { plugins } = useBlokkli();
 function getGroupedActions() {