@prosekit/vue 0.7.0-beta.1 → 0.7.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/prosekit-vue-autocomplete.d.ts +216 -25
- package/dist/prosekit-vue-autocomplete.d.ts.map +1 -1
- package/dist/prosekit-vue-autocomplete.js +270 -9
- package/dist/prosekit-vue-autocomplete.js.map +1 -1
- package/dist/prosekit-vue-block-handle.d.ts +202 -19
- package/dist/prosekit-vue-block-handle.d.ts.map +1 -1
- package/dist/prosekit-vue-block-handle.js +211 -7
- package/dist/prosekit-vue-block-handle.js.map +1 -1
- package/dist/prosekit-vue-drop-indicator.d.ts +24 -8
- package/dist/prosekit-vue-drop-indicator.d.ts.map +1 -1
- package/dist/prosekit-vue-drop-indicator.js +36 -3
- package/dist/prosekit-vue-drop-indicator.js.map +1 -1
- package/dist/prosekit-vue-inline-popover.d.ts +200 -9
- package/dist/prosekit-vue-inline-popover.d.ts.map +1 -1
- package/dist/prosekit-vue-inline-popover.js +171 -5
- package/dist/prosekit-vue-inline-popover.js.map +1 -1
- package/dist/prosekit-vue-menu.d.ts +287 -0
- package/dist/prosekit-vue-menu.d.ts.map +1 -0
- package/dist/prosekit-vue-menu.js +313 -0
- package/dist/prosekit-vue-menu.js.map +1 -0
- package/dist/prosekit-vue-popover.d.ts +219 -19
- package/dist/prosekit-vue-popover.d.ts.map +1 -1
- package/dist/prosekit-vue-popover.js +222 -7
- package/dist/prosekit-vue-popover.js.map +1 -1
- package/dist/prosekit-vue-resizable.d.ts +50 -15
- package/dist/prosekit-vue-resizable.d.ts.map +1 -1
- package/dist/prosekit-vue-resizable.js +92 -7
- package/dist/prosekit-vue-resizable.js.map +1 -1
- package/dist/prosekit-vue-table-handle.d.ts +427 -55
- package/dist/prosekit-vue-table-handle.d.ts.map +1 -1
- package/dist/prosekit-vue-table-handle.js +455 -19
- package/dist/prosekit-vue-table-handle.js.map +1 -1
- package/dist/prosekit-vue-tooltip.d.ts +203 -19
- package/dist/prosekit-vue-tooltip.d.ts.map +1 -1
- package/dist/prosekit-vue-tooltip.js +202 -7
- package/dist/prosekit-vue-tooltip.js.map +1 -1
- package/package.json +24 -16
- package/src/components/autocomplete/autocomplete-empty.gen.ts +21 -25
- package/src/components/autocomplete/autocomplete-item.gen.ts +80 -26
- package/src/components/autocomplete/autocomplete-popup.gen.ts +80 -0
- package/src/components/autocomplete/autocomplete-positioner.gen.ts +149 -0
- package/src/components/autocomplete/autocomplete-root.gen.ts +112 -0
- package/src/components/autocomplete/index.gen.ts +12 -4
- package/src/components/autocomplete/index.ts +27 -0
- package/src/components/block-handle/block-handle-add.gen.ts +51 -26
- package/src/components/block-handle/block-handle-draggable.gen.ts +51 -26
- package/src/components/block-handle/block-handle-popup.gen.ts +29 -0
- package/src/components/block-handle/block-handle-positioner.gen.ts +167 -0
- package/src/components/block-handle/block-handle-root.gen.ts +84 -0
- package/src/components/block-handle/index.gen.ts +13 -3
- package/src/components/block-handle/index.ts +27 -0
- package/src/components/drop-indicator/drop-indicator.gen.ts +57 -26
- package/src/components/drop-indicator/index.gen.ts +5 -1
- package/src/components/drop-indicator/index.ts +14 -0
- package/src/components/inline-popover/index.gen.ts +11 -1
- package/src/components/inline-popover/index.ts +22 -0
- package/src/components/inline-popover/inline-popover-popup.gen.ts +29 -0
- package/src/components/inline-popover/inline-popover-positioner.gen.ts +173 -0
- package/src/components/inline-popover/inline-popover-root.gen.ts +108 -0
- package/src/components/menu/index.gen.ts +19 -0
- package/src/components/menu/index.ts +37 -0
- package/src/components/menu/menu-item.gen.ts +91 -0
- package/src/components/menu/menu-popup.gen.ts +54 -0
- package/src/components/menu/menu-positioner.gen.ts +174 -0
- package/src/components/menu/menu-root.gen.ts +88 -0
- package/src/components/menu/menu-submenu-root.gen.ts +29 -0
- package/src/components/menu/menu-submenu-trigger.gen.ts +29 -0
- package/src/components/menu/menu-trigger.gen.ts +79 -0
- package/src/components/popover/index.gen.ts +11 -3
- package/src/components/popover/index.ts +24 -0
- package/src/components/popover/popover-popup.gen.ts +29 -0
- package/src/components/popover/popover-positioner.gen.ts +174 -0
- package/src/components/popover/popover-root.gen.ts +88 -26
- package/src/components/popover/popover-trigger.gen.ts +88 -26
- package/src/components/resizable/index.gen.ts +8 -2
- package/src/components/resizable/index.ts +20 -0
- package/src/components/resizable/resizable-handle.gen.ts +46 -26
- package/src/components/resizable/resizable-root.gen.ts +87 -26
- package/src/components/table-handle/index.gen.ts +17 -9
- package/src/components/table-handle/index.ts +58 -0
- package/src/components/table-handle/table-handle-column-menu-root.gen.ts +62 -0
- package/src/components/table-handle/table-handle-column-menu-trigger.gen.ts +56 -0
- package/src/components/table-handle/table-handle-column-popup.gen.ts +29 -0
- package/src/components/table-handle/table-handle-column-positioner.gen.ts +197 -0
- package/src/components/table-handle/table-handle-drag-preview.gen.ts +49 -26
- package/src/components/table-handle/table-handle-drop-indicator.gen.ts +49 -26
- package/src/components/table-handle/table-handle-root.gen.ts +51 -26
- package/src/components/table-handle/table-handle-row-menu-root.gen.ts +62 -0
- package/src/components/table-handle/table-handle-row-menu-trigger.gen.ts +56 -0
- package/src/components/table-handle/table-handle-row-popup.gen.ts +29 -0
- package/src/components/table-handle/table-handle-row-positioner.gen.ts +197 -0
- package/src/components/tooltip/index.gen.ts +11 -3
- package/src/components/tooltip/index.ts +24 -0
- package/src/components/tooltip/tooltip-popup.gen.ts +29 -0
- package/src/components/tooltip/tooltip-positioner.gen.ts +174 -0
- package/src/components/tooltip/tooltip-root.gen.ts +81 -26
- package/src/components/tooltip/tooltip-trigger.gen.ts +55 -26
- package/dist/create-component.js +0 -45
- package/dist/create-component.js.map +0 -1
- package/dist/create-emits.d.ts +0 -5
- package/dist/create-emits.d.ts.map +0 -1
- package/src/components/autocomplete/autocomplete-list.gen.ts +0 -33
- package/src/components/autocomplete/autocomplete-popover.gen.ts +0 -33
- package/src/components/block-handle/block-handle-popover.gen.ts +0 -33
- package/src/components/create-component.ts +0 -84
- package/src/components/create-emits.ts +0 -8
- package/src/components/inline-popover/inline-popover.gen.ts +0 -33
- package/src/components/popover/popover-content.gen.ts +0 -33
- package/src/components/table-handle/table-handle-column-root.gen.ts +0 -33
- package/src/components/table-handle/table-handle-column-trigger.gen.ts +0 -33
- package/src/components/table-handle/table-handle-popover-content.gen.ts +0 -33
- package/src/components/table-handle/table-handle-popover-item.gen.ts +0 -33
- package/src/components/table-handle/table-handle-row-root.gen.ts +0 -33
- package/src/components/table-handle/table-handle-row-trigger.gen.ts +0 -33
- package/src/components/tooltip/tooltip-content.gen.ts +0 -33
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerBlockHandlePopupElement } from '@prosekit/web/block-handle';
|
|
6
|
+
import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes } from 'vue';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Props for the {@link BlockHandlePopup} Vue component.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export interface BlockHandlePopupProps {}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* A Vue component that renders an `prosekit-block-handle-popup` custom element.
|
|
17
|
+
*
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
export const BlockHandlePopup: DefineSetupFnComponent<BlockHandlePopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<BlockHandlePopupProps & HTMLAttributes>(
|
|
21
|
+
(props, { slots }) => {
|
|
22
|
+
registerBlockHandlePopupElement();
|
|
23
|
+
|
|
24
|
+
return () => {
|
|
25
|
+
return h('prosekit-block-handle-popup', props, slots.default?.());
|
|
26
|
+
};
|
|
27
|
+
},
|
|
28
|
+
{ props: [] },
|
|
29
|
+
);
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerBlockHandlePositionerElement, type BlockHandlePositionerProps as BlockHandlePositionerElementProps } from '@prosekit/web/block-handle';
|
|
6
|
+
import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Props for the {@link BlockHandlePositioner} Vue component.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export interface BlockHandlePositionerProps {
|
|
14
|
+
/**
|
|
15
|
+
* The placement of the popover, relative to the hovered block.
|
|
16
|
+
*
|
|
17
|
+
* @default "left"
|
|
18
|
+
*/
|
|
19
|
+
placement?: BlockHandlePositionerElementProps['placement'];
|
|
20
|
+
/**
|
|
21
|
+
* Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
|
|
22
|
+
* to place the floating element on top of other page content.
|
|
23
|
+
*
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
hoist?: BlockHandlePositionerElementProps['hoist'];
|
|
27
|
+
/**
|
|
28
|
+
* @default false
|
|
29
|
+
* @hidden
|
|
30
|
+
*/
|
|
31
|
+
flip?: BlockHandlePositionerElementProps['flip'];
|
|
32
|
+
/**
|
|
33
|
+
* @default false
|
|
34
|
+
* @hidden
|
|
35
|
+
*/
|
|
36
|
+
shift?: BlockHandlePositionerElementProps['shift'];
|
|
37
|
+
/**
|
|
38
|
+
* @default true
|
|
39
|
+
* @hidden
|
|
40
|
+
*/
|
|
41
|
+
hide?: BlockHandlePositionerElementProps['hide'];
|
|
42
|
+
/**
|
|
43
|
+
* The strategy to use for positioning
|
|
44
|
+
*
|
|
45
|
+
* @default "absolute"
|
|
46
|
+
*/
|
|
47
|
+
strategy?: BlockHandlePositionerElementProps['strategy'];
|
|
48
|
+
/**
|
|
49
|
+
* Options to activate auto-update listeners
|
|
50
|
+
*
|
|
51
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
52
|
+
*
|
|
53
|
+
* @default true
|
|
54
|
+
*/
|
|
55
|
+
autoUpdate?: BlockHandlePositionerElementProps['autoUpdate'];
|
|
56
|
+
/**
|
|
57
|
+
* The distance between the reference and floating element.
|
|
58
|
+
*
|
|
59
|
+
* @default 6
|
|
60
|
+
*/
|
|
61
|
+
offset?: BlockHandlePositionerElementProps['offset'];
|
|
62
|
+
/**
|
|
63
|
+
* Whether the floating element can overlap the reference element to keep it
|
|
64
|
+
* in view.
|
|
65
|
+
*
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
overlap?: BlockHandlePositionerElementProps['overlap'];
|
|
69
|
+
/**
|
|
70
|
+
* Whether to constrain the floating element's width and height to not exceed
|
|
71
|
+
* the viewport.
|
|
72
|
+
*
|
|
73
|
+
* @default false
|
|
74
|
+
*/
|
|
75
|
+
fitViewport?: BlockHandlePositionerElementProps['fitViewport'];
|
|
76
|
+
/**
|
|
77
|
+
* Whether to constrain the floating element's width so that it matches the
|
|
78
|
+
* reference element.
|
|
79
|
+
*
|
|
80
|
+
* @default false
|
|
81
|
+
*/
|
|
82
|
+
sameWidth?: BlockHandlePositionerElementProps['sameWidth'];
|
|
83
|
+
/**
|
|
84
|
+
* Whether to constrain the floating element's height so that it matches the
|
|
85
|
+
* reference element.
|
|
86
|
+
*
|
|
87
|
+
* @default false
|
|
88
|
+
*/
|
|
89
|
+
sameHeight?: BlockHandlePositionerElementProps['sameHeight'];
|
|
90
|
+
/**
|
|
91
|
+
* Whether to improve positioning for inline reference elements that span over
|
|
92
|
+
* multiple lines.
|
|
93
|
+
*
|
|
94
|
+
* @default false
|
|
95
|
+
*/
|
|
96
|
+
inline?: BlockHandlePositionerElementProps['inline'];
|
|
97
|
+
/**
|
|
98
|
+
* Describes the clipping element(s) or area that overflow will be checked relative to.
|
|
99
|
+
* Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
|
|
100
|
+
*
|
|
101
|
+
* @default 'clippingAncestors'
|
|
102
|
+
*/
|
|
103
|
+
boundary?: BlockHandlePositionerElementProps['boundary'];
|
|
104
|
+
/**
|
|
105
|
+
* Describes the root boundary that the element will be checked for overflow relative to.
|
|
106
|
+
* Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
|
|
107
|
+
*
|
|
108
|
+
* @default 'viewport'
|
|
109
|
+
*/
|
|
110
|
+
rootBoundary?: BlockHandlePositionerElementProps['rootBoundary'];
|
|
111
|
+
/**
|
|
112
|
+
* Describes the virtual padding around the boundary to check for overflow.
|
|
113
|
+
* Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
|
|
114
|
+
*
|
|
115
|
+
* @default 4
|
|
116
|
+
*/
|
|
117
|
+
overflowPadding?: BlockHandlePositionerElementProps['overflowPadding'];
|
|
118
|
+
/**
|
|
119
|
+
* The element that will be used to check for overflow. Please see
|
|
120
|
+
* https://floating-ui.com/docs/detectoverflow#elementcontext for more
|
|
121
|
+
* information.
|
|
122
|
+
*
|
|
123
|
+
* @default 'floating'
|
|
124
|
+
*/
|
|
125
|
+
elementContext?: BlockHandlePositionerElementProps['elementContext'];
|
|
126
|
+
/**
|
|
127
|
+
* Whether to check the alternate elementContext's boundary. Please see
|
|
128
|
+
* https://floating-ui.com/docs/detectoverflow#altboundary for more
|
|
129
|
+
* information.
|
|
130
|
+
*
|
|
131
|
+
* @default false
|
|
132
|
+
*/
|
|
133
|
+
altBoundary?: BlockHandlePositionerElementProps['altBoundary'];
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* A Vue component that renders an `prosekit-block-handle-positioner` custom element.
|
|
138
|
+
*
|
|
139
|
+
* @public
|
|
140
|
+
*/
|
|
141
|
+
export const BlockHandlePositioner: DefineSetupFnComponent<BlockHandlePositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<BlockHandlePositionerProps & HTMLAttributes>(
|
|
142
|
+
(props, { slots }) => {
|
|
143
|
+
registerBlockHandlePositionerElement();
|
|
144
|
+
|
|
145
|
+
const elementRef = shallowRef<HTMLElement | null>(null);
|
|
146
|
+
|
|
147
|
+
const splittedProps = computed(() => {
|
|
148
|
+
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;
|
|
149
|
+
return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17], restProps] as const;
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
watchEffect(() => {
|
|
153
|
+
const element = elementRef.value;
|
|
154
|
+
if (!element) return;
|
|
155
|
+
|
|
156
|
+
const [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17] = splittedProps.value[0];
|
|
157
|
+
|
|
158
|
+
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 });
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
return () => {
|
|
162
|
+
const restProps = splittedProps.value[1];
|
|
163
|
+
return h('prosekit-block-handle-positioner', { ...restProps, ref: elementRef }, slots.default?.());
|
|
164
|
+
};
|
|
165
|
+
},
|
|
166
|
+
{ props: ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },
|
|
167
|
+
);
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerBlockHandleRootElement, type BlockHandleRootEvents, type BlockHandleRootProps as BlockHandleRootElementProps } from '@prosekit/web/block-handle';
|
|
6
|
+
import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
|
|
7
|
+
|
|
8
|
+
import { useEditorContext } from '../../injection/editor-context.ts';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Props for the {@link BlockHandleRoot} Vue component.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
export interface BlockHandleRootProps {
|
|
16
|
+
/**
|
|
17
|
+
* The ProseKit editor instance.
|
|
18
|
+
*
|
|
19
|
+
* @default null
|
|
20
|
+
* @hidden
|
|
21
|
+
*/
|
|
22
|
+
editor?: BlockHandleRootElementProps['editor'];
|
|
23
|
+
/** Fired when the hovered block changes. */
|
|
24
|
+
onStateChange?: (event: BlockHandleRootEvents['stateChange']) => void;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* A Vue component that renders an `prosekit-block-handle-root` custom element.
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
export const BlockHandleRoot: DefineSetupFnComponent<BlockHandleRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<BlockHandleRootProps & HTMLAttributes>(
|
|
33
|
+
(props, { slots }) => {
|
|
34
|
+
registerBlockHandleRootElement();
|
|
35
|
+
|
|
36
|
+
const elementRef = shallowRef<HTMLElement | null>(null);
|
|
37
|
+
|
|
38
|
+
const p0Fallback = useEditorContext();
|
|
39
|
+
|
|
40
|
+
const splittedProps = computed(() => {
|
|
41
|
+
const { editor: p0, onStateChange: e0, ...restProps } = props;
|
|
42
|
+
return [[p0, e0], restProps] as const;
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const handlers: Array<((event: any) => void) | undefined> = [];
|
|
46
|
+
|
|
47
|
+
watchEffect(() => {
|
|
48
|
+
const element = elementRef.value;
|
|
49
|
+
if (!element) return;
|
|
50
|
+
|
|
51
|
+
const [p0, e0] = splittedProps.value[0];
|
|
52
|
+
|
|
53
|
+
Object.assign(element, { editor: p0 ?? p0Fallback });
|
|
54
|
+
|
|
55
|
+
handlers.length = 0;
|
|
56
|
+
handlers.push(e0);
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
watchEffect(() => {
|
|
60
|
+
const element = elementRef.value;
|
|
61
|
+
if (!element) return;
|
|
62
|
+
|
|
63
|
+
const ac = new AbortController();
|
|
64
|
+
for (const [index, eventName] of ['stateChange'].entries()) {
|
|
65
|
+
element.addEventListener(
|
|
66
|
+
eventName,
|
|
67
|
+
(event: Event) => {
|
|
68
|
+
handlers[index]?.(event);
|
|
69
|
+
},
|
|
70
|
+
{ signal: ac.signal },
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
return () => ac.abort();
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
return () => {
|
|
77
|
+
const restProps = splittedProps.value[1];
|
|
78
|
+
return h('prosekit-block-handle-root', { ...restProps, ref: elementRef }, slots.default?.());
|
|
79
|
+
};
|
|
80
|
+
},
|
|
81
|
+
{ props: ['editor', 'onStateChange'] },
|
|
82
|
+
);
|
|
83
|
+
|
|
84
|
+
export type { BlockHandleRootEvents };
|
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
2
4
|
|
|
3
|
-
export {
|
|
5
|
+
export { BlockHandleAdd, type BlockHandleAddProps } from './block-handle-add.gen.ts';
|
|
4
6
|
|
|
5
|
-
export {
|
|
7
|
+
export { BlockHandleDraggable, type BlockHandleDraggableProps } from './block-handle-draggable.gen.ts';
|
|
8
|
+
|
|
9
|
+
export { BlockHandlePopup, type BlockHandlePopupProps } from './block-handle-popup.gen.ts';
|
|
10
|
+
|
|
11
|
+
export { BlockHandlePositioner, type BlockHandlePositionerProps } from './block-handle-positioner.gen.ts';
|
|
12
|
+
|
|
13
|
+
export { BlockHandleRoot, type BlockHandleRootProps, type BlockHandleRootEvents } from './block-handle-root.gen.ts';
|
|
14
|
+
|
|
15
|
+
export { BlockHandleStateChangeEvent } from '@prosekit/web/block-handle';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
|
|
3
|
+
@module
|
|
4
|
+
|
|
5
|
+
## Anatomy
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import {
|
|
9
|
+
BlockHandleAdd,
|
|
10
|
+
BlockHandleDraggable,
|
|
11
|
+
BlockHandlePopup,
|
|
12
|
+
BlockHandlePositioner,
|
|
13
|
+
BlockHandleRoot,
|
|
14
|
+
} from 'prosekit/vue/block-handle'
|
|
15
|
+
|
|
16
|
+
<BlockHandleRoot>
|
|
17
|
+
<BlockHandlePositioner>
|
|
18
|
+
<BlockHandlePopup>
|
|
19
|
+
<BlockHandleAdd>...</BlockHandleAdd>
|
|
20
|
+
<BlockHandleDraggable>...</BlockHandleDraggable>
|
|
21
|
+
</BlockHandlePopup>
|
|
22
|
+
</BlockHandlePositioner>
|
|
23
|
+
</BlockHandleRoot>
|
|
24
|
+
```
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
export * from './index.gen.ts'
|
|
@@ -1,33 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
} from '
|
|
7
|
-
import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerDropIndicatorElement, type DropIndicatorProps as DropIndicatorElementProps } from '@prosekit/web/drop-indicator';
|
|
6
|
+
import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
|
|
8
7
|
|
|
9
|
-
import {
|
|
10
|
-
import type { CreateEmits } from '../create-emits.ts'
|
|
8
|
+
import { useEditorContext } from '../../injection/editor-context.ts';
|
|
11
9
|
|
|
12
10
|
/**
|
|
13
|
-
* Props for the {@link DropIndicator} component.
|
|
11
|
+
* Props for the {@link DropIndicator} Vue component.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
14
|
*/
|
|
15
|
-
export interface DropIndicatorProps
|
|
15
|
+
export interface DropIndicatorProps {
|
|
16
|
+
/**
|
|
17
|
+
* The ProseKit editor instance.
|
|
18
|
+
*
|
|
19
|
+
* @default null
|
|
20
|
+
* @hidden
|
|
21
|
+
*/
|
|
22
|
+
editor?: DropIndicatorElementProps['editor'];
|
|
23
|
+
/**
|
|
24
|
+
* The line width in pixels.
|
|
25
|
+
*
|
|
26
|
+
* @default 2
|
|
27
|
+
*/
|
|
28
|
+
width?: DropIndicatorElementProps['width'];
|
|
29
|
+
}
|
|
16
30
|
|
|
17
31
|
/**
|
|
18
|
-
*
|
|
32
|
+
* A Vue component that renders an `prosekit-drop-indicator` custom element.
|
|
33
|
+
*
|
|
34
|
+
* @public
|
|
19
35
|
*/
|
|
20
|
-
export
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
)
|
|
36
|
+
export const DropIndicator: DefineSetupFnComponent<DropIndicatorProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<DropIndicatorProps & HTMLAttributes>(
|
|
37
|
+
(props, { slots }) => {
|
|
38
|
+
registerDropIndicatorElement();
|
|
39
|
+
|
|
40
|
+
const elementRef = shallowRef<HTMLElement | null>(null);
|
|
41
|
+
|
|
42
|
+
const p0Fallback = useEditorContext();
|
|
43
|
+
|
|
44
|
+
const splittedProps = computed(() => {
|
|
45
|
+
const { editor: p0, width: p1, ...restProps } = props;
|
|
46
|
+
return [[p0, p1], restProps] as const;
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
watchEffect(() => {
|
|
50
|
+
const element = elementRef.value;
|
|
51
|
+
if (!element) return;
|
|
52
|
+
|
|
53
|
+
const [p0, p1] = splittedProps.value[0];
|
|
54
|
+
|
|
55
|
+
Object.assign(element, { editor: p0 ?? p0Fallback, width: p1 });
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
return () => {
|
|
59
|
+
const restProps = splittedProps.value[1];
|
|
60
|
+
return h('prosekit-drop-indicator', { ...restProps, ref: elementRef }, slots.default?.());
|
|
61
|
+
};
|
|
62
|
+
},
|
|
63
|
+
{ props: ['editor', 'width'] },
|
|
64
|
+
);
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export { DropIndicator, type DropIndicatorProps } from './drop-indicator.gen.ts';
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export { InlinePopoverPopup, type InlinePopoverPopupProps } from './inline-popover-popup.gen.ts';
|
|
6
|
+
|
|
7
|
+
export { InlinePopoverPositioner, type InlinePopoverPositionerProps } from './inline-popover-positioner.gen.ts';
|
|
8
|
+
|
|
9
|
+
export { InlinePopoverRoot, type InlinePopoverRootProps, type InlinePopoverRootEvents } from './inline-popover-root.gen.ts';
|
|
10
|
+
|
|
11
|
+
export { OpenChangeEvent } from '@prosekit/web/inline-popover';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
|
|
3
|
+
@module
|
|
4
|
+
|
|
5
|
+
## Anatomy
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import {
|
|
9
|
+
InlinePopoverPopup,
|
|
10
|
+
InlinePopoverPositioner,
|
|
11
|
+
InlinePopoverRoot,
|
|
12
|
+
} from 'prosekit/vue/inline-popover'
|
|
13
|
+
|
|
14
|
+
<InlinePopoverRoot>
|
|
15
|
+
<InlinePopoverPositioner>
|
|
16
|
+
<InlinePopoverPopup>...</InlinePopoverPopup>
|
|
17
|
+
</InlinePopoverPositioner>
|
|
18
|
+
</InlinePopoverRoot>
|
|
19
|
+
```
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
export * from './index.gen.ts'
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerInlinePopoverPopupElement } from '@prosekit/web/inline-popover';
|
|
6
|
+
import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes } from 'vue';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Props for the {@link InlinePopoverPopup} Vue component.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export interface InlinePopoverPopupProps {}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* A Vue component that renders an `prosekit-inline-popover-popup` custom element.
|
|
17
|
+
*
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
export const InlinePopoverPopup: DefineSetupFnComponent<InlinePopoverPopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverPopupProps & HTMLAttributes>(
|
|
21
|
+
(props, { slots }) => {
|
|
22
|
+
registerInlinePopoverPopupElement();
|
|
23
|
+
|
|
24
|
+
return () => {
|
|
25
|
+
return h('prosekit-inline-popover-popup', props, slots.default?.());
|
|
26
|
+
};
|
|
27
|
+
},
|
|
28
|
+
{ props: [] },
|
|
29
|
+
);
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerInlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';
|
|
6
|
+
import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Props for the {@link InlinePopoverPositioner} Vue component.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export interface InlinePopoverPositionerProps {
|
|
14
|
+
/**
|
|
15
|
+
* The initial placement of the floating element
|
|
16
|
+
*
|
|
17
|
+
* @default "top"
|
|
18
|
+
*/
|
|
19
|
+
placement?: InlinePopoverPositionerElementProps['placement'];
|
|
20
|
+
/**
|
|
21
|
+
* The distance between the reference and floating element.
|
|
22
|
+
*
|
|
23
|
+
* @default 12
|
|
24
|
+
*/
|
|
25
|
+
offset?: InlinePopoverPositionerElementProps['offset'];
|
|
26
|
+
/**
|
|
27
|
+
* Whether to hide the floating element when the reference element or the
|
|
28
|
+
* floating element is fully clipped.
|
|
29
|
+
*
|
|
30
|
+
* @default true
|
|
31
|
+
*/
|
|
32
|
+
hide?: InlinePopoverPositionerElementProps['hide'];
|
|
33
|
+
/**
|
|
34
|
+
* Whether the floating element can overlap the reference element to keep it
|
|
35
|
+
* in view.
|
|
36
|
+
*
|
|
37
|
+
* @default true
|
|
38
|
+
*/
|
|
39
|
+
overlap?: InlinePopoverPositionerElementProps['overlap'];
|
|
40
|
+
/**
|
|
41
|
+
* Whether to improve positioning for inline reference elements that span over
|
|
42
|
+
* multiple lines.
|
|
43
|
+
*
|
|
44
|
+
* @default true
|
|
45
|
+
*/
|
|
46
|
+
inline?: InlinePopoverPositionerElementProps['inline'];
|
|
47
|
+
/**
|
|
48
|
+
* Describes the virtual padding around the boundary to check for overflow.
|
|
49
|
+
*
|
|
50
|
+
* @default 8
|
|
51
|
+
*/
|
|
52
|
+
overflowPadding?: InlinePopoverPositionerElementProps['overflowPadding'];
|
|
53
|
+
/**
|
|
54
|
+
* The strategy to use for positioning
|
|
55
|
+
*
|
|
56
|
+
* @default "absolute"
|
|
57
|
+
*/
|
|
58
|
+
strategy?: InlinePopoverPositionerElementProps['strategy'];
|
|
59
|
+
/**
|
|
60
|
+
* Options to activate auto-update listeners
|
|
61
|
+
*
|
|
62
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
63
|
+
*
|
|
64
|
+
* @default true
|
|
65
|
+
*/
|
|
66
|
+
autoUpdate?: InlinePopoverPositionerElementProps['autoUpdate'];
|
|
67
|
+
/**
|
|
68
|
+
* Whether to use the browser Popover API to place the floating element on
|
|
69
|
+
* top of other page content.
|
|
70
|
+
*
|
|
71
|
+
* @default true
|
|
72
|
+
*/
|
|
73
|
+
hoist?: InlinePopoverPositionerElementProps['hoist'];
|
|
74
|
+
/**
|
|
75
|
+
* Whether to flip the `placement` in order to keep it in view when the
|
|
76
|
+
* preferred placement(s) will overflow the clipping boundary. You can also
|
|
77
|
+
* provide an array of placements to try sequentially if the preferred
|
|
78
|
+
* `placement` does not fit.
|
|
79
|
+
*
|
|
80
|
+
* @default true
|
|
81
|
+
*/
|
|
82
|
+
flip?: InlinePopoverPositionerElementProps['flip'];
|
|
83
|
+
/**
|
|
84
|
+
* Whether the floating element should shift to keep it in view.
|
|
85
|
+
*
|
|
86
|
+
* @default true
|
|
87
|
+
*/
|
|
88
|
+
shift?: InlinePopoverPositionerElementProps['shift'];
|
|
89
|
+
/**
|
|
90
|
+
* Whether to constrain the floating element's width and height to not exceed
|
|
91
|
+
* the viewport.
|
|
92
|
+
*
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
fitViewport?: InlinePopoverPositionerElementProps['fitViewport'];
|
|
96
|
+
/**
|
|
97
|
+
* Whether to constrain the floating element's width so that it matches the
|
|
98
|
+
* reference element.
|
|
99
|
+
*
|
|
100
|
+
* @default false
|
|
101
|
+
*/
|
|
102
|
+
sameWidth?: InlinePopoverPositionerElementProps['sameWidth'];
|
|
103
|
+
/**
|
|
104
|
+
* Whether to constrain the floating element's height so that it matches the
|
|
105
|
+
* reference element.
|
|
106
|
+
*
|
|
107
|
+
* @default false
|
|
108
|
+
*/
|
|
109
|
+
sameHeight?: InlinePopoverPositionerElementProps['sameHeight'];
|
|
110
|
+
/**
|
|
111
|
+
* Describes the clipping element(s) or area that overflow will be checked relative to.
|
|
112
|
+
* Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
|
|
113
|
+
*
|
|
114
|
+
* @default 'clippingAncestors'
|
|
115
|
+
*/
|
|
116
|
+
boundary?: InlinePopoverPositionerElementProps['boundary'];
|
|
117
|
+
/**
|
|
118
|
+
* Describes the root boundary that the element will be checked for overflow relative to.
|
|
119
|
+
* Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
|
|
120
|
+
*
|
|
121
|
+
* @default 'viewport'
|
|
122
|
+
*/
|
|
123
|
+
rootBoundary?: InlinePopoverPositionerElementProps['rootBoundary'];
|
|
124
|
+
/**
|
|
125
|
+
* The element that will be used to check for overflow. Please see
|
|
126
|
+
* https://floating-ui.com/docs/detectoverflow#elementcontext for more
|
|
127
|
+
* information.
|
|
128
|
+
*
|
|
129
|
+
* @default 'floating'
|
|
130
|
+
*/
|
|
131
|
+
elementContext?: InlinePopoverPositionerElementProps['elementContext'];
|
|
132
|
+
/**
|
|
133
|
+
* Whether to check the alternate elementContext's boundary. Please see
|
|
134
|
+
* https://floating-ui.com/docs/detectoverflow#altboundary for more
|
|
135
|
+
* information.
|
|
136
|
+
*
|
|
137
|
+
* @default false
|
|
138
|
+
*/
|
|
139
|
+
altBoundary?: InlinePopoverPositionerElementProps['altBoundary'];
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* A Vue component that renders an `prosekit-inline-popover-positioner` custom element.
|
|
144
|
+
*
|
|
145
|
+
* @public
|
|
146
|
+
*/
|
|
147
|
+
export const InlinePopoverPositioner: DefineSetupFnComponent<InlinePopoverPositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverPositionerProps & HTMLAttributes>(
|
|
148
|
+
(props, { slots }) => {
|
|
149
|
+
registerInlinePopoverPositionerElement();
|
|
150
|
+
|
|
151
|
+
const elementRef = shallowRef<HTMLElement | null>(null);
|
|
152
|
+
|
|
153
|
+
const splittedProps = computed(() => {
|
|
154
|
+
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;
|
|
155
|
+
return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17], restProps] as const;
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
watchEffect(() => {
|
|
159
|
+
const element = elementRef.value;
|
|
160
|
+
if (!element) return;
|
|
161
|
+
|
|
162
|
+
const [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17] = splittedProps.value[0];
|
|
163
|
+
|
|
164
|
+
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 });
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
return () => {
|
|
168
|
+
const restProps = splittedProps.value[1];
|
|
169
|
+
return h('prosekit-inline-popover-positioner', { ...restProps, ref: elementRef }, slots.default?.());
|
|
170
|
+
};
|
|
171
|
+
},
|
|
172
|
+
{ props: ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },
|
|
173
|
+
);
|