@threadlabs/looma 0.22.9 → 0.22.11

package/vue/editor/index.js

@@ -23,6 +23,11 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorTableOverlay: "ui-editor-table-overlay"
 };
 //#endregion
+//#region src/components/shared/overlay.js
+function announceOverlayOpen(document, id) {
+	document.dispatchEvent(new CustomEvent("ui-overlay-open", { detail: { id } }));
+}
+//#endregion
 //#region src/vue/editor/image-delivery.ts
 function optionalString(value) {
 	return typeof value === "string" && value.length > 0 ? value : void 0;
@@ -1722,7 +1727,8 @@ var LoomaEditor = defineComponent({
 					pluginKey: "looma-text-formatting-menu",
 					shouldShow: ({ editor: menuEditor, from, to }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && shouldShowTextFormattingToolbar(menuEditor, from, to),
 					tippyOptions: {
-						appendTo: () => root.value ?? document.body,
+						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
+						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
 						duration: 100,
 						maxWidth: "none",
 						placement: "top"
@@ -1733,7 +1739,8 @@ var LoomaEditor = defineComponent({
 					pluginKey: "looma-link-context-menu",
 					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value,
 					tippyOptions: {
-						appendTo: () => root.value ?? document.body,
+						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
+						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
 						duration: 100,
 						maxWidth: "none",
 						placement: "bottom"

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit.
 import {
   computed,
   Fragment,
@@ -190,14 +190,22 @@ export interface ComponentHostOptions {
   readonly dispatch: (name: string, detail?: unknown) => boolean
   /** The authored controller edge, retained for the live loader's module diagnostic. */
   readonly controllerSource?: { readonly specifier: string; readonly definition: string }
-  /** The component's props, which a controller reads through `host.state`. */
+  /** Accepted component props, which a controller reads through `host.props`. */
   readonly props?: Readable<Readonly<Record<string, unknown>>>
+  /** Raw Vue prop inputs before the declared type is applied. */
+  readonly propInputs?: (name: string) => unknown
+  readonly propNames?: readonly string[]
+  readonly propValidity?: (name: string) => Readonly<Record<string, unknown>>
   /** Template refs, by the ref name the component declared. Vue collects a `v-for` ref into an array. */
   readonly refs?: Readonly<Record<string, Readable<HTMLElement | HTMLElement[] | null>>>
   /** Declared state, which a controller reads and writes. */
   readonly state?: Readonly<Record<string, { value: any }>>
   /** Declared computed values, which a controller reads. */
   readonly computed?: Readonly<Record<string, Readable<unknown>>>
+  /** Declared data resources, which a controller reads. */
+  readonly data?: Readonly<Record<string, Readable<unknown>>>
+  /** Values inherited through declared context, which a controller reads. */
+  readonly context?: Readonly<Record<string, Readable<unknown>>>
 }
 
 /** Vue does not promise a `v-for` ref array in source order, and the host does. */
@@ -226,7 +234,18 @@ export function useComponentHost(
   controllerLoader: () => Promise<unknown>,
   options: ComponentHostOptions,
 ) {
-  const { root, dispatch, props, refs = {}, state = {}, computed: computedValues = {} } = options
+  const {
+    root,
+    dispatch,
+    props,
+    propInputs = () => null,
+    propNames = [],
+    refs = {},
+    state = {},
+    computed: computedValues = {},
+    data = {},
+    context = {},
+  } = options
   const vueSlots = useSlots()
   const component = getCurrentInstance()
   const report = (error: unknown): void => {
@@ -269,12 +288,32 @@ export function useComponentHost(
         throw controllerDiagnostic('HJ001', error)
       })
   const stops: Array<() => void> = []
-  const read = (name: string): unknown =>
+  const readState = (name: string): unknown =>
     Object.hasOwn(state, name)
       ? state[name]!.value
       : Object.hasOwn(computedValues, name)
       ? computedValues[name]!.value
-      : props?.value[name]
+      : Object.hasOwn(data, name)
+      ? data[name]!.value
+      : Object.hasOwn(context, name)
+      ? context[name]!.value
+      : undefined
+  const propHandles = Object.create(null) as Record<string, unknown>
+  for (const name of propNames) {
+    const validity = () => options.propValidity?.(name)
+    propHandles[name] = Object.freeze({
+      get value() {
+        return props?.value[name]
+      },
+      get inputValue() {
+        return propInputs(name)
+      },
+      get validity() {
+        return validity()
+      },
+      validate: validity,
+    })
+  }
   const host = {
     get element(): Element {
       return root.value as Element
@@ -283,7 +322,7 @@ export function useComponentHost(
       return root.value as Element
     },
     state: new Proxy({} as Record<string, unknown>, {
-      get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+      get: (_target, name) => typeof name === 'string' ? readState(name) : undefined,
       set: (_target, name, value) => {
         if (typeof name !== 'string' || !Object.hasOwn(state, name)) {
           throw new TypeError(`Only declared state is writable; \`${String(name)}\` is not.`)
@@ -291,7 +330,12 @@ export function useComponentHost(
         state[name]!.value = value
         return true
       },
+      has: (_target, name) =>
+        typeof name === 'string'
+        && (Object.hasOwn(state, name) || Object.hasOwn(computedValues, name)
+          || Object.hasOwn(data, name) || Object.hasOwn(context, name)),
     }),
+    props: Object.freeze(propHandles),
     refs: Object.defineProperties(
       {},
       Object.fromEntries(