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

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <ViewOptionButton
+      v-for="option in options"
+      :key="option.id"
+      v-bind="option"
+    />
+  </div>
+</template>
+
+<script setup>
+import ViewOptionButton from "./Button/index.vue";
+defineProps({
+  options: { type: Array, required: true }
+});
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ViewOption } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    options: ViewOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,57 @@
+<template>
+  <div
+    id="bk-toolbar-view-options"
+    class="_bk_relative _bk_group _bk_border-l _bk_border-l-mono-600"
+  >
+    <button
+      ref="toggleElement"
+      class="bk-toolbar-button bk-has-dropdown-bottom _bk_group/tooltip"
+      :class="{
+  'bk-is-active': isVisible
+}"
+      @click.prevent="isVisible = !isVisible"
+    >
+      <Icon name="bk_mdi_eye_tracking" />
+      <Tooltip
+        :label="$t('viewOptions', 'View options')"
+        placement="below-right"
+      />
+    </button>
+    <BlokkliTransition name="context-menu">
+      <ToolbarDropdown
+        v-if="isVisible"
+        :toggle-element
+        :title="$t('viewOptions', 'View options')"
+        class="_bk_origin-top-right"
+        @close="isVisible = false"
+      >
+        <ViewOptionsList :options />
+      </ToolbarDropdown>
+    </BlokkliTransition>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
+import ViewOptionsList from "./List/index.vue";
+import {
+  Icon,
+  ToolbarDropdown,
+  Tooltip,
+  BlokkliTransition
+} from "#blokkli/editor/components";
+const { plugins, $t } = useBlokkli();
+const isVisible = ref(false);
+const toggleElement = useTemplateRef("toggleElement");
+const options = computed(
+  () => [...plugins.get("viewOption")].sort(
+    (a, b) => (a.weight ?? 0) - (b.weight ?? 0)
+  )
+);
+</script>
+
+<script>
+export default {
+  name: "ToolbarViewOptions"
+};
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/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>;

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

@@ -53,7 +53,6 @@
       <div class="bk bk-toolbar-menu">
         <button
           class="bk-toolbar-menu-button"
-          data-test="app-menu-toggle"
           @click.prevent.stop="openMenu"
         >
           <Icon name="bk_mdi_menu" />
@@ -69,8 +68,8 @@
       <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
       <div id="bk-toolbar-title" class="bk-toolbar-container" />
       <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
-      <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
-      <div id="bk-toolbar-artboard" class="bk-toolbar-container" />
+      <ViewOptions />
+      <div id="bk-toolbar-artboard" class="bk-toolbar-container _bk_group" />
       <div
         id="bk-toolbar-before-sidebar"
         class="bk-sidebar-container-tabs bk-toolbar-container"
@@ -113,6 +112,7 @@ import {
   useTemplateRef
 } from "#imports";
 import AppMenu from "./../AppMenu/index.vue";
+import ViewOptions from "./ViewOptions/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const { ui, selection, storage } = useBlokkli();
 const isApproving = computed(() => ui.isApproving.value);
@@ -285,14 +285,6 @@ export default {
   display: flex;
   height: 100%;
 }
-#bk-toolbar-view-options:is(.bk .bk-toolbar-container) {
-  display: none;
-}
-@media (width >= 64rem) {
-  #bk-toolbar-view-options:is(.bk .bk-toolbar-container) {
-    display: flex;
-  }
-}
 #bk-toolbar-title:is(.bk .bk-toolbar-container) {
   flex: 1;
   font-size: var(--text-xs, 12px);
@@ -369,49 +361,4 @@ export default {
 :is(:is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled) .bk-icon) svg {
   fill: currentcolor;
 }
-.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-is-active:is(.bk .bk-toolbar-button) {
-  background-color: rgb(var(--bk-theme-mono-800) / 1);
-}
-.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;
-  }
-}
-:is(.bk .bk-toolbar-button) .bk-icon svg {
-  fill: currentcolor;
-}
 </style>

package/dist/runtime/editor/components/ToolbarDropdown/index.d.vue.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/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;
 }