@prosekit/vue 0.7.0-beta.0 → 0.7.0-beta.2

package/src/components/menu/menu-trigger.gen.ts

@@ -0,0 +1,79 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuTriggerElement, type MenuTriggerEvents, type MenuTriggerProps as MenuTriggerElementProps } from '@prosekit/web/menu';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+/**
+ * Props for the {@link MenuTrigger} Vue component.
+ *
+ * @public
+ */
+export interface MenuTriggerProps {
+  /**
+   * Whether the component should ignore user interaction.
+   *
+   * @default false
+   */
+  disabled?: MenuTriggerElementProps['disabled'];
+  /** Emitted when the menu is opened or closed. */
+  onOpenChange?: (event: MenuTriggerEvents['openChange']) => void;
+}
+
+/**
+ * A Vue component that renders an `prosekit-menu-trigger` custom element.
+ *
+ * @public
+ */
+export const MenuTrigger: DefineSetupFnComponent<MenuTriggerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<MenuTriggerProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerMenuTriggerElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { disabled: p0, onOpenChange: e0, ...restProps } = props;
+      return [[p0, e0], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, e0] = splittedProps.value[0];
+
+      Object.assign(element, { disabled: p0 });
+
+      handlers.length = 0;
+      handlers.push(e0);
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const ac = new AbortController();
+      for (const [index, eventName] of ['openChange'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-menu-trigger', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['disabled', 'onOpenChange'] },
+);
+
+export type { MenuTriggerEvents };

package/src/components/popover/index.gen.ts

@@ -1,5 +1,13 @@
-export { PopoverContent, type PopoverContentProps, type PopoverContentEmits } from './popover-content.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { PopoverRoot, type PopoverRootProps, type PopoverRootEmits } from './popover-root.gen.ts'
+export { PopoverPopup, type PopoverPopupProps } from './popover-popup.gen.ts';
 
-export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerEmits } from './popover-trigger.gen.ts'
+export { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner.gen.ts';
+
+export { PopoverRoot, type PopoverRootProps, type PopoverRootEvents } from './popover-root.gen.ts';
+
+export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerEvents } from './popover-trigger.gen.ts';
+
+export { OpenChangeEvent } from '@prosekit/web/popover';

package/src/components/popover/index.ts

@@ -0,0 +1,24 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  PopoverPopup,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTrigger,
+} from 'prosekit/vue/popover'
+
+<PopoverRoot>
+  <PopoverTrigger>...</PopoverTrigger>
+  <PopoverPositioner>
+    <PopoverPopup>...</PopoverPopup>
+  </PopoverPositioner>
+</PopoverRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/popover/popover-popup.gen.ts

@@ -0,0 +1,29 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerPopoverPopupElement } from '@prosekit/web/popover';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes } from 'vue';
+
+/**
+ * Props for the {@link PopoverPopup} Vue component.
+ *
+ * @public
+ */
+export interface PopoverPopupProps {}
+
+/**
+ * A Vue component that renders an `prosekit-popover-popup` custom element.
+ *
+ * @public
+ */
+export const PopoverPopup: DefineSetupFnComponent<PopoverPopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<PopoverPopupProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerPopoverPopupElement();
+
+    return () => {
+      return h('prosekit-popover-popup', props, slots.default?.());
+    };
+  },
+  { props: [] },
+);

package/src/components/popover/popover-positioner.gen.ts

@@ -0,0 +1,174 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerPopoverPositionerElement, type PopoverPositionerProps as PopoverPositionerElementProps } from '@prosekit/web/popover';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+/**
+ * Props for the {@link PopoverPositioner} Vue component.
+ *
+ * @public
+ */
+export interface PopoverPositionerProps {
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: PopoverPositionerElementProps['strategy'];
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "top"
+   */
+  placement?: PopoverPositionerElementProps['placement'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: PopoverPositionerElementProps['autoUpdate'];
+  /**
+   * Whether to use the browser Popover API to place the floating element on
+   * top of other page content.
+   *
+   * @default true
+   */
+  hoist?: PopoverPositionerElementProps['hoist'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 6
+   */
+  offset?: PopoverPositionerElementProps['offset'];
+  /**
+   * Whether to flip the `placement` in order to keep it in view when the
+   * preferred placement(s) will overflow the clipping boundary. You can also
+   * provide an array of placements to try sequentially if the preferred
+   * `placement` does not fit.
+   *
+   * @default true
+   */
+  flip?: PopoverPositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: PopoverPositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: PopoverPositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: PopoverPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: PopoverPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: PopoverPositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: PopoverPositionerElementProps['inline'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: PopoverPositionerElementProps['hide'];
+  /**
+   * Describes the clipping element(s) or area that overflow will be checked relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
+   *
+   * @default 'clippingAncestors'
+   */
+  boundary?: PopoverPositionerElementProps['boundary'];
+  /**
+   * Describes the root boundary that the element will be checked for overflow relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
+   *
+   * @default 'viewport'
+   */
+  rootBoundary?: PopoverPositionerElementProps['rootBoundary'];
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   * Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
+   *
+   * @default 4
+   */
+  overflowPadding?: PopoverPositionerElementProps['overflowPadding'];
+  /**
+   * The element that will be used to check for overflow. Please see
+   * https://floating-ui.com/docs/detectoverflow#elementcontext for more
+   * information.
+   *
+   * @default 'floating'
+   */
+  elementContext?: PopoverPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: PopoverPositionerElementProps['altBoundary'];
+}
+
+/**
+ * A Vue component that renders an `prosekit-popover-positioner` custom element.
+ *
+ * @public
+ */
+export const PopoverPositioner: DefineSetupFnComponent<PopoverPositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<PopoverPositionerProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerPopoverPositionerElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;
+      return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17], restProps] as const;
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17] = splittedProps.value[0];
+
+      Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-popover-positioner', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },
+);

package/src/components/popover/popover-root.gen.ts

@@ -1,33 +1,95 @@
-import {
-  popoverRootProps,
-  popoverRootEvents,
-  type PopoverRootProps as Props,
-  type PopoverRootEvents as Events,
-} from '@prosekit/web/popover'
-import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-import { createComponent } from '../create-component.ts'
-import type { CreateEmits } from '../create-emits.ts'
+import { registerPopoverRootElement, type PopoverRootEvents, type PopoverRootProps as PopoverRootElementProps } from '@prosekit/web/popover';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
 /**
- * Props for the {@link PopoverRoot} component.
+ * Props for the {@link PopoverRoot} Vue component.
+ *
+ * @public
  */
-export interface PopoverRootProps extends Partial<Props> {}
+export interface PopoverRootProps {
+  /**
+   * Whether the popover should be modal.
+   * When true, the popover will trap focus and prevent interaction with the rest of the page.
+   *
+   * @default false
+   */
+  modal?: PopoverRootElementProps['modal'];
+  /**
+   * Whether the overlay is initially open.
+   * @default false
+   */
+  defaultOpen?: PopoverRootElementProps['defaultOpen'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: PopoverRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: PopoverRootElementProps['disabled'];
+  /** Emitted when the popover is opened or closed. */
+  onOpenChange?: (event: PopoverRootEvents['openChange']) => void;
+}
 
 /**
- * Emits for the {@link PopoverRoot} component.
+ * A Vue component that renders an `prosekit-popover-root` custom element.
+ *
+ * @public
  */
-export interface PopoverRootEmits extends CreateEmits<Events> {}
-
-export const PopoverRoot: DefineSetupFnComponent<
-  PopoverRootProps & HTMLAttributes,
-  PopoverRootEmits
-> = createComponent<
-  PopoverRootProps,
-  PopoverRootEmits
->(
-  'prosekit-popover-root',
-  'PopoverRoot',
-  Object.keys(popoverRootProps),
-  Object.keys(popoverRootEvents),
-)
+export const PopoverRoot: DefineSetupFnComponent<PopoverRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<PopoverRootProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerPopoverRootElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { defaultOpen: p0, disabled: p1, modal: p2, open: p3, onOpenChange: e0, ...restProps } = props;
+      return [[p0, p1, p2, p3, e0], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2, p3, e0] = splittedProps.value[0];
+
+      Object.assign(element, { defaultOpen: p0, disabled: p1, modal: p2, open: p3 });
+
+      handlers.length = 0;
+      handlers.push(e0);
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const ac = new AbortController();
+      for (const [index, eventName] of ['openChange'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-popover-root', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['defaultOpen', 'disabled', 'modal', 'open', 'onOpenChange'] },
+);
+
+export type { PopoverRootEvents };

package/src/components/popover/popover-trigger.gen.ts

@@ -1,33 +1,95 @@
-import {
-  popoverTriggerProps,
-  popoverTriggerEvents,
-  type PopoverTriggerProps as Props,
-  type PopoverTriggerEvents as Events,
-} from '@prosekit/web/popover'
-import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-import { createComponent } from '../create-component.ts'
-import type { CreateEmits } from '../create-emits.ts'
+import { registerPopoverTriggerElement, type PopoverTriggerEvents, type PopoverTriggerProps as PopoverTriggerElementProps } from '@prosekit/web/popover';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
 /**
- * Props for the {@link PopoverTrigger} component.
+ * Props for the {@link PopoverTrigger} Vue component.
+ *
+ * @public
  */
-export interface PopoverTriggerProps extends Partial<Props> {}
+export interface PopoverTriggerProps {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: PopoverTriggerElementProps['disabled'];
+  /**
+   * Whether the popover should also open when the trigger is hovered.
+   * @default false
+   */
+  openOnHover?: PopoverTriggerElementProps['openOnHover'];
+  /**
+   * The delay in milliseconds before opening the popover when hovering.
+   * Only applies when `openOnHover` is true.
+   * @default 300
+   */
+  delay?: PopoverTriggerElementProps['delay'];
+  /**
+   * The delay in milliseconds before closing the popover when hover ends.
+   * Only applies when `openOnHover` is true.
+   * @default 0
+   */
+  closeDelay?: PopoverTriggerElementProps['closeDelay'];
+  /** Emitted when the popover is opened or closed. */
+  onOpenChange?: (event: PopoverTriggerEvents['openChange']) => void;
+}
 
 /**
- * Emits for the {@link PopoverTrigger} component.
+ * A Vue component that renders an `prosekit-popover-trigger` custom element.
+ *
+ * @public
  */
-export interface PopoverTriggerEmits extends CreateEmits<Events> {}
-
-export const PopoverTrigger: DefineSetupFnComponent<
-  PopoverTriggerProps & HTMLAttributes,
-  PopoverTriggerEmits
-> = createComponent<
-  PopoverTriggerProps,
-  PopoverTriggerEmits
->(
-  'prosekit-popover-trigger',
-  'PopoverTrigger',
-  Object.keys(popoverTriggerProps),
-  Object.keys(popoverTriggerEvents),
-)
+export const PopoverTrigger: DefineSetupFnComponent<PopoverTriggerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<PopoverTriggerProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerPopoverTriggerElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { closeDelay: p0, delay: p1, disabled: p2, openOnHover: p3, onOpenChange: e0, ...restProps } = props;
+      return [[p0, p1, p2, p3, e0], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2, p3, e0] = splittedProps.value[0];
+
+      Object.assign(element, { closeDelay: p0, delay: p1, disabled: p2, openOnHover: p3 });
+
+      handlers.length = 0;
+      handlers.push(e0);
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const ac = new AbortController();
+      for (const [index, eventName] of ['openChange'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-popover-trigger', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['closeDelay', 'delay', 'disabled', 'openOnHover', 'onOpenChange'] },
+);
+
+export type { PopoverTriggerEvents };

package/src/components/resizable/index.gen.ts

@@ -1,3 +1,9 @@
-export { ResizableHandle, type ResizableHandleProps, type ResizableHandleEmits } from './resizable-handle.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { ResizableRoot, type ResizableRootProps, type ResizableRootEmits } from './resizable-root.gen.ts'
+export { ResizableRoot, type ResizableRootProps, type ResizableRootEvents } from './resizable-root.gen.ts';
+
+export { ResizableHandle, type ResizableHandleProps } from './resizable-handle.gen.ts';
+
+export { ResizeEndEvent, ResizeStartEvent } from '@prosekit/web/resizable';

package/src/components/resizable/index.ts

@@ -0,0 +1,20 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  ResizableHandle,
+  ResizableRoot,
+} from 'prosekit/vue/resizable'
+
+<ResizableRoot>
+  <img src="..." />
+  <ResizableHandle>...</ResizableHandle>
+</ResizableRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/resizable/resizable-handle.gen.ts

@@ -1,33 +1,53 @@
-import {
-  resizableHandleProps,
-  resizableHandleEvents,
-  type ResizableHandleProps as Props,
-  type ResizableHandleEvents as Events,
-} from '@prosekit/web/resizable'
-import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-import { createComponent } from '../create-component.ts'
-import type { CreateEmits } from '../create-emits.ts'
+import { registerResizableHandleElement, type ResizableHandleProps as ResizableHandleElementProps } from '@prosekit/web/resizable';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
 /**
- * Props for the {@link ResizableHandle} component.
+ * Props for the {@link ResizableHandle} Vue component.
+ *
+ * @public
  */
-export interface ResizableHandleProps extends Partial<Props> {}
+export interface ResizableHandleProps {
+  /**
+   * The position of the handle.
+   *
+   * @default "bottom-right"
+   */
+  position?: ResizableHandleElementProps['position'];
+}
 
 /**
- * Emits for the {@link ResizableHandle} component.
+ * A Vue component that renders an `prosekit-resizable-handle` custom element.
+ *
+ * @public
  */
-export interface ResizableHandleEmits extends CreateEmits<Events> {}
-
-export const ResizableHandle: DefineSetupFnComponent<
-  ResizableHandleProps & HTMLAttributes,
-  ResizableHandleEmits
-> = createComponent<
-  ResizableHandleProps,
-  ResizableHandleEmits
->(
-  'prosekit-resizable-handle',
-  'ResizableHandle',
-  Object.keys(resizableHandleProps),
-  Object.keys(resizableHandleEvents),
-)
+export const ResizableHandle: DefineSetupFnComponent<ResizableHandleProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<ResizableHandleProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerResizableHandleElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { position: p0, ...restProps } = props;
+      return [[p0], restProps] as const;
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0] = splittedProps.value[0];
+
+      Object.assign(element, { position: p0 });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-resizable-handle', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['position'] },
+);