@bluepic/embed 0.4.0-next.142 → 0.4.0-next.143
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/bluepic-embed.iife.js +144 -144
- package/dist/bluepic-embed.umd.js +144 -144
- package/dist/components/TemplateEditor/BxTemplateEditor.vue.d.ts +41 -15
- package/dist/components/TemplateEditor/FieldHintsLayer.vue.d.ts +34 -0
- package/dist/components/TemplateEditor/TemplateView.vue.d.ts +11 -2
- package/dist/embed/embed.d.ts +90 -18
- package/dist/main.cjs +85 -85
- package/dist/main.mjs +17772 -17260
- package/dist/style.css +1 -1
- package/dist/util/fieldHints/fieldFocus.d.ts +46 -0
- package/dist/util/fieldHints/index.d.ts +3 -0
- package/dist/util/fieldHints/useHintReveal.d.ts +9 -0
- package/package.json +2 -2
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { type InjectionKey } from 'vue';
|
|
2
|
+
import type { BluepicField } from '@bluepic/types';
|
|
3
|
+
/**
|
|
4
|
+
* Sending focus from a hint on the preview to the field control that drives it.
|
|
5
|
+
*
|
|
6
|
+
* The two halves live far apart — the hint is rendered inside zoompinch's
|
|
7
|
+
* matrix slot, the control somewhere down a recursive `FieldsList` — so this is
|
|
8
|
+
* provided by `BxTemplateEditor` and injected at both ends rather than threaded
|
|
9
|
+
* through props.
|
|
10
|
+
*
|
|
11
|
+
* DESKTOP registers elements here and focuses them directly. MOBILE does not:
|
|
12
|
+
* one field slide is on screen at a time, so "focus" there means swiping the
|
|
13
|
+
* swiper to the right slide, which only `BxTemplateEditor` can do. That
|
|
14
|
+
* asymmetry is why `focus()` is a controller method and not just a lookup.
|
|
15
|
+
*/
|
|
16
|
+
export type FieldFocusController = {
|
|
17
|
+
/** Desktop only; mobile slides are addressed by index, not by element. */
|
|
18
|
+
register(field: BluepicField, el: HTMLElement | null): void;
|
|
19
|
+
focus(field: BluepicField): void;
|
|
20
|
+
};
|
|
21
|
+
export declare const FIELD_FOCUS_KEY: InjectionKey<FieldFocusController>;
|
|
22
|
+
export declare function provideFieldFocus(controller: FieldFocusController): void;
|
|
23
|
+
/** Absent whenever the fields tree is rendered outside `BxTemplateEditor`. */
|
|
24
|
+
export declare function useFieldFocus(): FieldFocusController | undefined;
|
|
25
|
+
/** Marks the focused field for a moment so the eye can follow the jump. */
|
|
26
|
+
export declare const FIELD_FOCUS_FLASH_CLASS = "bx-field-hint-target";
|
|
27
|
+
/**
|
|
28
|
+
* Scroll a field's control into view, flash it, and focus the first thing in it
|
|
29
|
+
* that can take focus.
|
|
30
|
+
*
|
|
31
|
+
* `block: 'nearest'` rather than 'center': the fields panel is a scroll
|
|
32
|
+
* container, and centering yanks the whole list even when the target was
|
|
33
|
+
* already comfortably visible.
|
|
34
|
+
*/
|
|
35
|
+
export declare function revealFieldElement(el: HTMLElement | null | undefined): void;
|
|
36
|
+
/**
|
|
37
|
+
* Creates the desktop half: a registry keyed by the field object itself.
|
|
38
|
+
*
|
|
39
|
+
* A WeakMap (not a Map) because fields are plain objects off the serial — when
|
|
40
|
+
* the serial is swapped the old field objects should simply be collectable,
|
|
41
|
+
* with no unregister bookkeeping to get wrong.
|
|
42
|
+
*/
|
|
43
|
+
export declare function createFieldElementRegistry(): {
|
|
44
|
+
register(field: BluepicField, el: HTMLElement | null): void;
|
|
45
|
+
get(field: BluepicField): HTMLElement | undefined;
|
|
46
|
+
};
|
|
@@ -6,3 +6,6 @@ export { frameIndexOfPoint, hintPriorityClass, orderHitboxes, quadAABB, quadArea
|
|
|
6
6
|
export type { OrderableHitbox } from './geometry';
|
|
7
7
|
export { useFieldHitboxes } from './useFieldHitboxes';
|
|
8
8
|
export type { FieldHitbox } from './useFieldHitboxes';
|
|
9
|
+
export { useHintReveal } from './useHintReveal';
|
|
10
|
+
export { createFieldElementRegistry, provideFieldFocus, revealFieldElement, useFieldFocus, FIELD_FOCUS_KEY, FIELD_FOCUS_FLASH_CLASS, } from './fieldFocus';
|
|
11
|
+
export type { FieldFocusController } from './fieldFocus';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
export declare function useHintReveal(enabled: Ref<boolean>): {
|
|
3
|
+
revealed: Ref<boolean, boolean>;
|
|
4
|
+
hide: () => void;
|
|
5
|
+
onPointerEnter: (event: PointerEvent) => void;
|
|
6
|
+
onPointerLeave: (event: PointerEvent) => void;
|
|
7
|
+
onPointerDown: (event: PointerEvent) => void;
|
|
8
|
+
onPointerUp: (event: PointerEvent) => void;
|
|
9
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bluepic/embed",
|
|
3
|
-
"version": "0.4.0-next.
|
|
3
|
+
"version": "0.4.0-next.143",
|
|
4
4
|
"description": "Bluepic embed sdk",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@auth0/auth0-vue": "^2.4.0",
|
|
48
|
-
"@bluepic/types": "^0.6.
|
|
48
|
+
"@bluepic/types": "^0.6.497",
|
|
49
49
|
"@hono/zod-openapi": "^1.1.4",
|
|
50
50
|
"@types/css": "^0.0.38",
|
|
51
51
|
"@types/downloadjs": "^1.4.6",
|