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

package/dist/runtime/editor/components/ToolbarDropdown/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    ref="rootEl"
+    class="_bk_absolute _bk_top-full _bk_right-0 _bk_bg-white _bk_shadow-2xl _bk_border _bk_border-mono-300 _bk_border-t-0"
+  >
+    <div
+      class="_bk_bg-mono-200 _bk_text-xs _bk_font-semibold _bk_uppercase _bk_tracking-wider _bk_border-b _bk_border-b-mono-300 _bk_flex _bk_h-40 _bk_items-center _bk_justify-between"
+    >
+      <div class="_bk_px-10">{{ title }}</div>
+      <button
+        class="_bk_size-40 _bk_flex _bk_items-center _bk_justify-center _bk_hover:bg-mono-300"
+        @click.prevent="$emit('close')"
+      >
+        <Icon name="bk_mdi_close" class="_bk_size-15" />
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useDismiss } from "#blokkli/editor/composables";
+import { Icon } from "#blokkli/editor/components";
+import { useTemplateRef } from "vue";
+const props = defineProps({
+  title: { type: String, required: true },
+  toggleElement: { type: null, required: true }
+});
+const emit = defineEmits(["close"]);
+const rootEl = useTemplateRef("rootEl");
+useDismiss({
+  element: rootEl,
+  ignore: () => props.toggleElement,
+  onDismiss: () => emit("close")
+});
+</script>

package/dist/runtime/editor/components/ToolbarDropdown/index.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title: string;
+    toggleElement: HTMLElement | null;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Tooltip/Context.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="_bk_mt-8 _bk_text-xs _bk_w-full">
     <strong>{{ label }}</strong>
-    <span v-if="description">: {{ description }}</span>
+    <span v-if="description"
+      >: {{ description }}</span
+    >
   </div>
 </template>
 

package/dist/runtime/editor/components/Tooltip/index.d.vue.ts

@@ -14,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string | null;
-    margin: boolean;
     placement: Placement | "inline";
+    margin: boolean;
 }, {}, {}, {}, 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/components/Tooltip/index.vue

@@ -30,7 +30,10 @@
       />
       <slot name="shortcut" />
     </div>
-    <div v-if="description" class="_bk_font-normal _bk_mt-5 _bk_text-xs">
+    <div
+      v-if="description"
+      class="_bk_font-normal _bk_mt-5 _bk_text-xs"
+    >
       <div v-if="description" v-html="description" />
     </div>
     <slot name="status" />

package/dist/runtime/editor/components/Tooltip/index.vue.d.ts

@@ -14,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string | null;
-    margin: boolean;
     placement: Placement | "inline";
+    margin: boolean;
 }, {}, {}, {}, 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/components/index.d.ts

@@ -58,6 +58,7 @@ export { default as NotEditStateInfo } from './NotEditStateInfo/index.vue.js';
 export { default as ButtonAction } from './ButtonAction/index.vue.js';
 export { default as Pill } from './Pill/index.vue.js';
 export { default as DialogModal } from './Dialog/index.vue.js';
+export { default as ToolbarDropdown } from './ToolbarDropdown/index.vue.js';
 export declare const NestedEditorOverlay: any;
 export declare const BundleSelector: any;
 export declare const DiffApproval: any;

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

@@ -58,6 +58,7 @@ export { default as NotEditStateInfo } from "./NotEditStateInfo/index.vue";
 export { default as ButtonAction } from "./ButtonAction/index.vue";
 export { default as Pill } from "./Pill/index.vue";
 export { default as DialogModal } from "./Dialog/index.vue";
+export { default as ToolbarDropdown } from "./ToolbarDropdown/index.vue";
 export const NestedEditorOverlay = defineAsyncComponent(
   () => import("./NestedEditorOverlay/index.vue")
 );

package/dist/runtime/editor/composables/defineViewOption.d.ts

@@ -0,0 +1,5 @@
+import type { ComputedRef } from 'vue';
+import type { ViewOption } from '../providers/plugin.js';
+export declare function defineViewOption(options: ViewOption): {
+    isVisible: ComputedRef<boolean>;
+};

package/dist/runtime/editor/composables/defineViewOption.js

@@ -0,0 +1,10 @@
+import { computed, onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineViewOption(options) {
+  const { storage, ui, plugins } = useBlokkli();
+  const isActive = storage.use("view_option_" + options.id, false, true);
+  const isVisible = computed(() => isActive.value && !ui.isMobile.value);
+  const cb = () => options;
+  onMounted(() => plugins.add("viewOption", cb));
+  onBeforeUnmount(() => plugins.remove("viewOption", cb));
+  return { isVisible };
+}

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

@@ -11,6 +11,7 @@ export { defineMenuButton } from './defineMenuButton.js';
 export { defineRenderer } from './defineRenderer.js';
 export { defineShortcut } from './defineShortcut.js';
 export { defineTourItem } from './defineTourItem.js';
+export { defineViewOption } from './defineViewOption.js';
 export { onBlokkliEvent } from './onBlokkliEvent.js';
 export { onBroadcastEvent } from './onBroadcastEvent.js';
 export { useAnimationFrame } from './useAnimationFrame.js';
@@ -18,6 +19,8 @@ export { useBlockRegistration } from './useBlockRegistration.js';
 export { useDebugLogger } from './useDebugLogger.js';
 export { useDelayedIntersectionObserver } from './useDelayedIntersectionObserver.js';
 export { useDialog } from './useDialog.js';
+export { useDismiss } from './useDismiss.js';
+export type { UseDismissOptions } from './useDismiss.js';
 export { useFocusTrap } from './useFocusTrap.js';
 export { useGlobalBlokkliObject } from './useGlobalBlokkliObject.js';
 export { useStateBasedCache } from './useStateBasedCache.js';

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

@@ -14,6 +14,7 @@ export { defineMenuButton } from "./defineMenuButton.js";
 export { defineRenderer } from "./defineRenderer.js";
 export { defineShortcut } from "./defineShortcut.js";
 export { defineTourItem } from "./defineTourItem.js";
+export { defineViewOption } from "./defineViewOption.js";
 export { onBlokkliEvent } from "./onBlokkliEvent.js";
 export { onBroadcastEvent } from "./onBroadcastEvent.js";
 export { useAnimationFrame } from "./useAnimationFrame.js";
@@ -21,6 +22,7 @@ export { useBlockRegistration } from "./useBlockRegistration.js";
 export { useDebugLogger } from "./useDebugLogger.js";
 export { useDelayedIntersectionObserver } from "./useDelayedIntersectionObserver.js";
 export { useDialog } from "./useDialog.js";
+export { useDismiss } from "./useDismiss.js";
 export { useFocusTrap } from "./useFocusTrap.js";
 export { useGlobalBlokkliObject } from "./useGlobalBlokkliObject.js";
 export { useStateBasedCache } from "./useStateBasedCache.js";

package/dist/runtime/editor/composables/useDismiss.d.ts

@@ -0,0 +1,30 @@
+import type { MaybeRefOrGetter } from 'vue';
+export type UseDismissOptions = {
+    /** Boundary element; interactions outside it dismiss. Ref or getter. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /**
+     * Called when a dismiss condition (outside click, canvas clickAway, Escape
+     * or a selection change) fires.
+     */
+    onDismiss: () => void;
+    /** Dismiss on Escape (unless a dialog is open). Defaults to true. */
+    escape?: boolean;
+    /**
+     * An additional element whose clicks should NOT dismiss — typically the
+     * trigger that toggles the dismissable element.
+     *
+     * Needed because the document click listener runs in the capture phase: the
+     * trigger's own `@click.stop` can't prevent it, so without this a click on
+     * the trigger would dismiss and then immediately re-open.
+     */
+    ignore?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+};
+/**
+ * Close a floating element (dropdown, menu, popover) when the user clicks
+ * outside of it, presses Escape, or changes the editor selection.
+ *
+ * @example
+ * const root = useTemplateRef('root')
+ * useDismiss({ element: root, onDismiss: () => emit('close') })
+ */
+export declare function useDismiss(options: UseDismissOptions): void;

package/dist/runtime/editor/composables/useDismiss.js

@@ -0,0 +1,43 @@
+import {
+  onMounted,
+  onBeforeUnmount,
+  toValue,
+  useBlokkli,
+  watch
+} from "#imports";
+import { onBlokkliEvent } from "./onBlokkliEvent.js";
+export function useDismiss(options) {
+  const { ui, selection } = useBlokkli();
+  const onDocumentClick = (e) => {
+    const el = toValue(options.element);
+    if (!el) {
+      return;
+    }
+    const target = e.target;
+    if (el.contains(target)) {
+      return;
+    }
+    const ignore = toValue(options.ignore);
+    if (ignore && ignore.contains(target)) {
+      return;
+    }
+    options.onDismiss();
+  };
+  onBlokkliEvent("keyPressed", (e) => {
+    if (options.escape === false || ui.hasDialogOpen.value) {
+      return;
+    }
+    if (e.code === "Escape") {
+      options.onDismiss();
+    }
+  });
+  onBlokkliEvent("window:clickAway", options.onDismiss);
+  watch(selection.uuids, options.onDismiss);
+  watch(selection.isDragging, options.onDismiss);
+  onMounted(
+    () => document.addEventListener("click", onDocumentClick, { capture: true })
+  );
+  onBeforeUnmount(
+    () => document.removeEventListener("click", onDocumentClick, { capture: true })
+  );
+}

package/dist/runtime/editor/composables/useGlobalBlokkliObject.d.ts

@@ -10,9 +10,9 @@ export interface BlokkliGlobalWindowObject {
      * augments this interface with a `test` namespace (see the playground
      * `test-cases` feature).
      *
-     * TODO: currently assigned unconditionally so E2E can run against a production
-     * build (dev-mode E2E triggers HMR reloads). Re-gate behind `import.meta.dev`
-     * so it never reaches a real production bundle once E2E can run in dev mode.
+     * The assignment is a test-only seam: its call site (in `EditProvider.vue`)
+     * is wrapped in `blokkli-test-only` markers and stripped from the published
+     * library during the dist build, so `.app` is never set in a real bundle.
      */
     app?: BlokkliApp;
 }