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

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.vue

@@ -25,22 +25,15 @@
 
 <script setup>
 import { Icon } from "#blokkli/editor/components";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
-import {
-  watch,
-  ref,
-  computed,
-  onMounted,
-  useBlokkli,
-  onBeforeUnmount
-} from "#imports";
+import { useDismiss } from "#blokkli/editor/composables";
+import { ref, computed, useBlokkli } from "#imports";
 const props = defineProps({
   menu: { type: Array, required: true },
   x: { type: Number, required: true },
   y: { type: Number, required: true }
 });
 const emit = defineEmits(["close"]);
-const { ui, selection } = useBlokkli();
+const { ui } = useBlokkli();
 const rootEl = ref(null);
 const innerStyle = computed(() => {
   const vp = ui.visibleViewportPadded.value;
@@ -53,18 +46,7 @@ const innerStyle = computed(() => {
     ...vertical
   };
 });
-onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
-    return;
-  }
-  if (e.code === "Escape") {
-    emit("close");
-  }
-});
-onBlokkliEvent("window:clickAway", () => {
-  emit("close");
-});
-watch(selection.uuids, () => emit("close"));
+useDismiss({ element: rootEl, onDismiss: () => emit("close") });
 const onClick = async (index) => {
   const item = props.menu[index];
   if (item && item.type === "button") {
@@ -73,18 +55,4 @@ const onClick = async (index) => {
   }
   emit("close");
 };
-const onMouseDown = (e) => {
-  if (!rootEl.value) {
-    return;
-  }
-  if ((e.target instanceof HTMLElement || e.target instanceof SVGElement) && !e.target.contains(rootEl.value)) {
-    emit("close");
-  }
-};
-onMounted(() => {
-  window.addEventListener("click", onMouseDown);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("click", onMouseDown);
-});
 </script>

package/dist/runtime/editor/plugins/ItemAction/index.vue

@@ -5,7 +5,6 @@
       v-show="!hidden"
       ref="el"
       :disabled="isDisabled"
-      :data-test="'plugin-item-action-' + id"
       class="_bk_group/tooltip _bk_flex _bk_items-center _bk_shrink-0 _bk_justify-center _bk_relative _bk_lg:static _bk_z-50 _bk_size-50 _bk_lg:hover:bg-mono-700 _bk_text-mono-300 _bk_lg:hover:text-mono-50 _bk_group/button"
       :class="[
   {

package/dist/runtime/editor/plugins/Sidebar/Detached/index.d.vue.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minWidth: number;
     minHeight: number;
+    minWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/plugins/Sidebar/Detached/index.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minWidth: number;
     minHeight: number;
+    minWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/plugins/Sidebar/index.d.vue.ts

@@ -200,9 +200,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    tourText: string;
-    minWidth: number;
     minHeight: number;
+    minWidth: number;
+    tourText: string;
     region: SidebarRegion;
     tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/editor/plugins/Sidebar/index.vue

@@ -5,7 +5,11 @@
       ref="tourElement"
       class="bk-toolbar-button _bk_group/tooltip"
       :class="[
-  { 'bk-is-active': activeSidebar === id && !isDisabled },
+  {
+    'bk-is-active': activeSidebar === id && !isDisabled,
+    'bk-has-dropdown-bottom': region === 'left',
+    'bk-has-dropdown-left': region !== 'left'
+  },
   'bk-is-' + region
 ]"
       :disabled="isDisabled"
@@ -674,57 +678,10 @@ export default {
     flex-direction: column;
   }
 }
-:is(:is(.bk .bk-sidebar-container-tabs) .bk-toolbar-button):before {
-  height: 0px;
-  width: 0px;
-  --bk-tw-border-style: solid;
-  border-style: solid;
-  --bk-tw-content: '';
-  content: var(--bk-tw-content);
-  position: absolute;
-  bottom: 0px;
-  left: 17.5px;
-  transform-origin: bottom;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
-  --bk-tw-scale-y: 0%;
-  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
-  border-width: 0 8px 6px;
-  border-color: transparent transparent #ffffff transparent;
-}
-@media (width >= 64rem) {
-  :is(.bk-is-right:is(:is(.bk .bk-sidebar-container-tabs) .bk-toolbar-button),.bk-is-right-bottom:is(:is(.bk .bk-sidebar-container-tabs) .bk-toolbar-button)):before {
-    border-width: 10px 0 10px 10px;
-    border-color: transparent transparent transparent #ffffff;
-    position: absolute;
-    top: 15px;
-    left: 0px;
-    transform-origin: 0;
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-    transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-    transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
-    --bk-tw-scale-x: 0%;
-    scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
-  }
-  .bk-is-left:is(:is(.bk .bk-sidebar-container-tabs) .bk-toolbar-button):before {
-    border-width: 0 10px 10px;
-    left: 15px;
-  }
-}
-.bk-is-active:is(:is(.bk .bk-sidebar-container-tabs) .bk-toolbar-button) {
-  background-color: rgb(var(--bk-theme-mono-700) / 1);
-}
-.bk-is-active:is(:is(.bk .bk-sidebar-container-tabs) .bk-toolbar-button):before {
-  --bk-tw-scale-x: 100%;
-  --bk-tw-scale-y: 100%;
-  --bk-tw-scale-z: 100%;
-  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
-}
 .bk .bk-sidebar-badge {
   position: absolute;
-  top: 3px;
-  right: 3px;
+  top: 5px;
+  right: 5px;
   display: flex;
   width: 18px;
   height: 18px;

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -200,9 +200,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    tourText: string;
-    minWidth: number;
     minHeight: number;
+    minWidth: number;
+    tourText: string;
     region: SidebarRegion;
     tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/editor/plugins/ToolbarButton/index.d.vue.ts

@@ -75,11 +75,17 @@ type __VLS_Props = {
      */
     noCommand?: boolean;
 };
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    after?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    el: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/plugins/ToolbarButton/index.vue

@@ -1,38 +1,40 @@
 <template>
   <Teleport :to="'#bk-toolbar-' + region">
-    <button
-      ref="el"
-      class="bk-toolbar-button _bk_group/tooltip"
-      :disabled="disabled"
-      :class="[
+    <div :style="{ order: weight || 0 }" class="_bk_relative">
+      <button
+        ref="el"
+        class="bk-toolbar-button _bk_group/tooltip"
+        :disabled="disabled"
+        :class="[
   { 'bk-is-active': active },
   id ? 'bk-is-' + id : void 0,
   $attrs.class
 ]"
-      :data-test-toolbar-button="id"
-      :style="{ order: weight || 0 }"
-      @click.prevent.stop="onClick"
-    >
-      <slot>
-        <Icon v-if="icon" :name="icon" />
-      </slot>
-      <Tooltip
-        :label="title"
-        :placement="tooltipPlacement"
-        :margin="region === 'before-sidebar'"
+        @click.prevent.stop="onClick"
       >
-        <template v-if="keyCode" #shortcut>
-          <ShortcutIndicator
-            :meta="meta"
-            :shift="shift"
-            :key-code="keyCode"
-            :label="title"
-            :group="shortcutGroup"
-            @pressed="onClick"
-          />
-        </template>
-      </Tooltip>
-    </button>
+        <slot>
+          <Icon v-if="icon" :name="icon" />
+          <slot name="icon-addon" />
+        </slot>
+        <Tooltip
+          :label="title"
+          :placement="tooltipPlacement"
+          :margin="region === 'before-sidebar'"
+        >
+          <template v-if="keyCode" #shortcut>
+            <ShortcutIndicator
+              :meta="meta"
+              :shift="shift"
+              :key-code="keyCode"
+              :label="title"
+              :group="shortcutGroup"
+              @pressed="onClick"
+            />
+          </template>
+        </Tooltip>
+      </button>
+      <slot name="after" />
+    </div>
   </Teleport>
 </template>
 
@@ -100,8 +102,100 @@ defineTourItem(() => {
     element: () => el.value
   };
 });
+defineExpose({ el });
 defineOptions({
   name: "PluginToolbarButton",
   inheritAttrs: false
 });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-toolbar-button {
+  display: flex;
+  height: 40px;
+  min-width: 50px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-mono-200) / 1);
+}
+@media (width >= 64rem) {
+  .bk .bk-toolbar-button {
+    height: 50px;
+  }
+}
+@media (width >= 64rem) {
+  @media (hover: hover) {
+    :is(.bk .bk-toolbar-button):not(.bk-is-active):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
+    }
+  }
+}
+.bk-has-dropdown-left:is(.bk .bk-toolbar-button):before,.bk-has-dropdown-bottom:is(.bk .bk-toolbar-button):before {
+  height: 0px;
+  width: 0px;
+  --bk-tw-border-style: solid;
+  border-style: solid;
+  --bk-tw-content: '';
+  content: var(--bk-tw-content);
+  position: absolute;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+}
+.bk-has-dropdown-bottom:is(.bk .bk-toolbar-button):before {
+  bottom: 0px;
+  transform-origin: bottom;
+  border-width: 0 10px 10px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: rgb(var(--bk-theme-mono-200) / 1);
+  border-left-color: transparent;
+  --bk-tw-scale-y: 0%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  left: calc(1 / 2 * 100%);
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk-has-dropdown-left:is(.bk .bk-toolbar-button):before {
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent #ffffff;
+  transform-origin: 0;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-scale-x: 0%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  top: calc(1 / 2 * 100%);
+  left: 0px;
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk-is-active:is(.bk .bk-toolbar-button) {
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
+}
+.bk-is-active:is(.bk .bk-toolbar-button):before {
+  --bk-tw-scale-x: 100% !important;
+  --bk-tw-scale-y: 100% !important;
+  --bk-tw-scale-z: 100% !important;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y) !important;
+}
+.bk-is-inactive:is(.bk .bk-toolbar-button) {
+  color: rgb(var(--bk-theme-mono-600) / 1);
+}
+[disabled]:is(.bk .bk-toolbar-button) {
+  pointer-events: none;
+  color: rgb(var(--bk-theme-mono-700) / 1);
+}
+:is(.bk .bk-toolbar-button) svg {
+  width: 18px;
+  height: 18px;
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-toolbar-button) svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

package/dist/runtime/editor/plugins/ToolbarButton/index.vue.d.ts

@@ -75,11 +75,17 @@ type __VLS_Props = {
      */
     noCommand?: boolean;
 };
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    after?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    el: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/plugins/index.d.ts

@@ -5,5 +5,4 @@ import PluginItemAction from './ItemAction/index.vue.js';
 import PluginSidebar from './Sidebar/index.vue.js';
 import PluginToolbarButton from './ToolbarButton/index.vue.js';
 import PluginTourItem from './TourItem/index.vue.js';
-import PluginViewOption from './ViewOption/index.vue.js';
-export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };
+export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, };

package/dist/runtime/editor/plugins/index.js

@@ -5,7 +5,6 @@ import PluginItemAction from "./ItemAction/index.vue";
 import PluginSidebar from "./Sidebar/index.vue";
 import PluginToolbarButton from "./ToolbarButton/index.vue";
 import PluginTourItem from "./TourItem/index.vue";
-import PluginViewOption from "./ViewOption/index.vue";
 export {
   PluginBlockIndicator,
   PluginContextMenu,
@@ -13,6 +12,5 @@ export {
   PluginItemAction,
   PluginSidebar,
   PluginToolbarButton,
-  PluginTourItem,
-  PluginViewOption
+  PluginTourItem
 };

package/dist/runtime/editor/providers/fieldValue.js

@@ -17,11 +17,6 @@ export default function fieldValueProvider(directive, state, types, definitions,
     )?.[0] ?? null;
   }
   function readFieldValue(fieldName, host) {
-    const element = directive.findEditableElement(fieldName, host);
-    if (!element) {
-      return null;
-    }
-    const editableData = directive.findEditable(fieldName, host);
     const cfg = types.editableFieldConfig.forName(
       host.type,
       host.bundle,
@@ -31,8 +26,6 @@ export default function fieldValueProvider(directive, state, types, definitions,
       return null;
     }
     const fieldType = cfg.type === "frame" || cfg.type === "markup" ? "markup" : "plain";
-    const isMarkup = cfg.type !== "plain";
-    const isComponent = !!editableData?.isComponent;
     const providerDefinition = definitions.getProviderDefinition(
       host.type,
       host.bundle
@@ -54,15 +47,20 @@ export default function fieldValueProvider(directive, state, types, definitions,
         matchingProp = findMatchingProp(mapping, fieldName);
       }
     }
+    if (matchingProp) {
+      const value2 = providerDefinition ? state.mutatedEntity.value[matchingProp] || "" : state.getFieldListItem(host.uuid)?.props?.[matchingProp] ?? "";
+      return { value: value2, fieldType };
+    }
+    const element = directive.findEditableElement(fieldName, host);
+    if (!element) {
+      return null;
+    }
+    const editableData = directive.findEditable(fieldName, host);
+    const isMarkup = cfg.type !== "plain";
+    const isComponent = !!editableData?.isComponent;
     let value;
     if (isComponent && editableData?.getValue) {
       value = editableData.getValue();
-    } else if (matchingProp) {
-      if (providerDefinition) {
-        value = state.mutatedEntity.value[matchingProp] || "";
-      } else {
-        value = state.getFieldListItem(host.uuid)?.props?.[matchingProp] ?? "";
-      }
     } else if (isMarkup) {
       value = element.innerHTML;
     } else {

package/dist/runtime/editor/providers/plugin.d.ts

@@ -39,17 +39,29 @@ export type HighlightItem = {
     onClick: () => void;
 };
 type HighlightFunction = PluginAddFunction<HighlightItem>;
+export type ViewOption = {
+    id: string;
+    label: string;
+    description: string;
+    icon: BlokkliIcon;
+    keyCode?: string;
+    tourText?: string;
+    weight?: number;
+};
+type ViewOptionFunction = PluginAddFunction<ViewOption>;
 type PluginFunctionMap = {
     addAction: AddActionFunction;
     itemDropdownAction: ItemDropdownActionFunction;
     menuButton: MenuButtonFunction;
     highlight: HighlightFunction;
+    viewOption: ViewOptionFunction;
 };
 type PluginDataMap = {
     addAction: AddAction;
     itemDropdownAction: ItemDropdownAction;
     menuButton: MenuButtonPlugin;
     highlight: HighlightItem;
+    viewOption: ViewOption;
 };
 export type PluginProvider = {
     /**

package/dist/runtime/editor/providers/plugin.js

@@ -4,6 +4,7 @@ export default function() {
   const itemDropdownActionPlugins = ref([]);
   const menuButtonPlugins = ref([]);
   const highlightPlugins = ref([]);
+  const viewOptionPlugins = ref([]);
   function add(type, fn) {
     if (type === "addAction") {
       addActionPlugins.value.push(fn);
@@ -13,6 +14,8 @@ export default function() {
       menuButtonPlugins.value.push(fn);
     } else if (type === "highlight") {
       highlightPlugins.value.push(fn);
+    } else if (type === "viewOption") {
+      viewOptionPlugins.value.push(fn);
     }
   }
   function remove(type, fn) {
@@ -32,6 +35,10 @@ export default function() {
       highlightPlugins.value = highlightPlugins.value.filter(
         (v) => v !== fn
       );
+    } else if (type === "viewOption") {
+      viewOptionPlugins.value = viewOptionPlugins.value.filter(
+        (v) => v !== fn
+      );
     }
   }
   function get(type) {
@@ -44,6 +51,8 @@ export default function() {
       storage = menuButtonPlugins.value;
     } else if (type === "highlight") {
       storage = highlightPlugins.value;
+    } else if (type === "viewOption") {
+      storage = viewOptionPlugins.value;
     } else {
       return [];
     }