@blokkli/editor 1.0.4 → 1.1.1

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.
Files changed (78) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +345 -16
  3. package/dist/runtime/adapter/drupal/graphql/base.graphql +2 -1
  4. package/dist/runtime/adapter/drupal/graphqlMiddleware.js +4 -1
  5. package/dist/runtime/adapter/index.d.ts +12 -1
  6. package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue +41 -39
  7. package/dist/runtime/blokkliPlugins/Sidebar/index.vue +10 -16
  8. package/dist/runtime/blokkliPlugins/ViewOption/index.vue +2 -0
  9. package/dist/runtime/components/BlokkliField.vue +75 -17
  10. package/dist/runtime/components/BlokkliItem.vue +34 -6
  11. package/dist/runtime/components/BlokkliProvider.vue +18 -1
  12. package/dist/runtime/components/Edit/BlockProxy/index.vue +102 -0
  13. package/dist/runtime/components/Edit/DragInteractions/index.vue +49 -25
  14. package/dist/runtime/components/Edit/DraggableList.vue +140 -30
  15. package/dist/runtime/components/Edit/EditProvider.vue +4 -0
  16. package/dist/runtime/components/Edit/Features/AddList/index.vue +3 -0
  17. package/dist/runtime/components/Edit/Features/Artboard/Overview/index.vue +111 -0
  18. package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue +47 -0
  19. package/dist/runtime/components/Edit/Features/Artboard/index.vue +301 -9
  20. package/dist/runtime/components/Edit/Features/BlockAddList/index.vue +29 -4
  21. package/dist/runtime/components/Edit/Features/CommandPalette/Palette/index.vue +3 -4
  22. package/dist/runtime/components/Edit/Features/Debug/Rects/index.vue +27 -0
  23. package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/index.vue +24 -3
  24. package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/fragment.glsl +56 -24
  25. package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/index.vue +184 -29
  26. package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl +36 -16
  27. package/dist/runtime/components/Edit/Features/DraggingOverlay/index.vue +4 -0
  28. package/dist/runtime/components/Edit/Features/Duplicate/index.vue +1 -13
  29. package/dist/runtime/components/Edit/Features/EditableMask/index.vue +2 -2
  30. package/dist/runtime/components/Edit/Features/History/index.vue +1 -1
  31. package/dist/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue +2 -2
  32. package/dist/runtime/components/Edit/Features/Options/Form/Checkboxes/index.vue +28 -25
  33. package/dist/runtime/components/Edit/Features/Options/Form/Color/index.vue +1 -1
  34. package/dist/runtime/components/Edit/Features/Options/Form/Item.vue +67 -39
  35. package/dist/runtime/components/Edit/Features/Options/Form/Number/index.vue +6 -2
  36. package/dist/runtime/components/Edit/Features/Options/Form/Radios/index.vue +1 -1
  37. package/dist/runtime/components/Edit/Features/Options/Form/Range/index.vue +2 -2
  38. package/dist/runtime/components/Edit/Features/Options/Form/Text/index.vue +2 -1
  39. package/dist/runtime/components/Edit/Features/Options/Form/index.vue +83 -33
  40. package/dist/runtime/components/Edit/Features/ProxyView/index.vue +38 -0
  41. package/dist/runtime/components/Edit/Features/Publish/index.vue +53 -6
  42. package/dist/runtime/components/Edit/Features/Search/Overlay/index.vue +3 -13
  43. package/dist/runtime/components/Edit/Features/Selection/Overlay/index.vue +1 -1
  44. package/dist/runtime/components/Edit/Features/Settings/Dialog/index.vue +2 -0
  45. package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue +3 -3
  46. package/dist/runtime/components/Edit/Features/Structure/index.vue +3 -3
  47. package/dist/runtime/components/Edit/ScrollBoundary/index.vue +24 -0
  48. package/dist/runtime/components/Edit/index.d.ts +2 -1
  49. package/dist/runtime/components/Edit/index.js +3 -1
  50. package/dist/runtime/composables/defineBlokkli.js +10 -5
  51. package/dist/runtime/constants/index.d.ts +1 -1
  52. package/dist/runtime/constants/index.js +6 -1
  53. package/dist/runtime/css/output.css +1 -1
  54. package/dist/runtime/helpers/animationProvider.js +10 -4
  55. package/dist/runtime/helpers/domProvider.d.ts +12 -4
  56. package/dist/runtime/helpers/domProvider.js +70 -26
  57. package/dist/runtime/helpers/featuresProvider.d.ts +1 -1
  58. package/dist/runtime/helpers/runtimeHelpers/index.d.ts +6 -0
  59. package/dist/runtime/helpers/runtimeHelpers/index.js +25 -0
  60. package/dist/runtime/helpers/selectionProvider.d.ts +2 -1
  61. package/dist/runtime/helpers/selectionProvider.js +7 -8
  62. package/dist/runtime/helpers/symbols.d.ts +7 -0
  63. package/dist/runtime/helpers/symbols.js +7 -0
  64. package/dist/runtime/helpers/typesProvider.d.ts +1 -1
  65. package/dist/runtime/helpers/uiProvider.d.ts +1 -0
  66. package/dist/runtime/helpers/uiProvider.js +16 -3
  67. package/dist/runtime/helpers/webgl/index.d.ts +6 -1
  68. package/dist/runtime/helpers/webgl/index.js +38 -5
  69. package/dist/runtime/icons/eye.svg +1 -0
  70. package/dist/runtime/types/generatedModuleTypes.d.ts +12 -4
  71. package/dist/runtime/types/index.d.ts +30 -1
  72. package/package.json +7 -5
  73. package/dist/runtime/components/Edit/Features/Artboard/Manager/Artboard.d.ts +0 -204
  74. package/dist/runtime/components/Edit/Features/Artboard/Manager/Artboard.js +0 -748
  75. package/dist/runtime/components/Edit/Features/Artboard/Manager/Scrollbar/index.vue +0 -176
  76. package/dist/runtime/components/Edit/Features/Artboard/Manager/index.vue +0 -317
  77. package/dist/runtime/helpers/Artboard/index.d.ts +0 -16
  78. package/dist/runtime/helpers/Artboard/index.js +0 -20
@@ -192,6 +192,27 @@ export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsI
192
192
  * appears to be selectable/draggable.
193
193
  */
194
194
  getDraggableElement?: (el: HTMLElement) => Element | undefined | null;
195
+ /**
196
+ * Define how the nested fields should be structured when the block is
197
+ * rendered without its component, for example when using
198
+ * `:proxy-mode="true"` on <BlokkliField>.
199
+ *
200
+ * Each array should define an array of field names.
201
+ *
202
+ * @example
203
+ * ```typescript
204
+ * defineBlokkli({
205
+ * bundle: 'three_columns',
206
+ * editor: {
207
+ * fieldLayout: [
208
+ * ['header'],
209
+ * ['left', 'center', 'right'],
210
+ * ]
211
+ * }
212
+ * })
213
+ * ```
214
+ */
215
+ fieldLayout?: string[][];
195
216
  };
196
217
  export type BlockDefinitionRenderForParent = {
197
218
  parentBundle: BlockBundleWithNested;
@@ -286,6 +307,12 @@ export type EntityContext = {
286
307
  type: string;
287
308
  bundle: string;
288
309
  };
310
+ export type BlokkliProviderEntityContext = {
311
+ uuid: string;
312
+ type: string;
313
+ bundle: string;
314
+ language?: string;
315
+ };
289
316
  export type EditEntity = {
290
317
  label?: string;
291
318
  status?: boolean;
@@ -742,6 +769,7 @@ export type BlokkliFieldElement = {
742
769
  name: string;
743
770
  label: string;
744
771
  isNested: boolean;
772
+ nestingLevel: number;
745
773
  fieldListType: ValidFieldListTypes;
746
774
  hostEntityType: string;
747
775
  hostEntityBundle: string;
@@ -841,7 +869,7 @@ export type EventbusEvents = {
841
869
  'block:append': BlockAppendEvent;
842
870
  'item:doubleClick': DraggableExistingBlock;
843
871
  scrollIntoView: ScrollIntoViewEvent;
844
- 'animationFrame:before': undefined;
872
+ 'animationFrame:before': number;
845
873
  'canvas:draw': CanvasDrawEvent;
846
874
  'state:reloaded': undefined;
847
875
  addContentSearchItem: AddContentSearchItemEvent;
@@ -854,6 +882,7 @@ export type EventbusEvents = {
854
882
  'droppable:focus': DroppableEntityField;
855
883
  'drop:clipboardItem': DropClipboardItemEvent;
856
884
  'sidebar:close': undefined;
885
+ 'sidebar:open': string;
857
886
  'action:placed': ActionPlacedEvent;
858
887
  'animator:add': AnimatorAddEvent;
859
888
  'ui:resized': undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blokkli/editor",
3
- "version": "1.0.4",
3
+ "version": "1.1.1",
4
4
  "description": "Interactive page building experience for Nuxt",
5
5
  "repository": "blokkli/editor",
6
6
  "type": "module",
@@ -19,15 +19,15 @@
19
19
  "scripts": {
20
20
  "prepack": "nuxt-module-build build && find dist/ -type f -name '*.*' | grep '.spec.' | xargs rm -f",
21
21
  "dev": "nuxi dev playground --host",
22
- "typecheck": "nuxi typecheck",
22
+ "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
23
23
  "dev:minimal": "nuxi dev playground-minimal --host",
24
24
  "dev:content": "nuxi dev playground-content --host",
25
25
  "styles:build": "postcss ./css/index.css -o ./src/runtime/css/output.css",
26
26
  "styles:watch": "postcss ./css/index.css -o ./src/runtime/css/output.css --watch",
27
- "dev:build": "nuxi generate playground",
27
+ "dev:build": "npm run dev:prepare && nuxi generate playground",
28
28
  "dev:start": "npx serve playground/.output/public",
29
29
  "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
30
- "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
30
+ "release": "npm run lint && npm run prepack && changelogen --release",
31
31
  "texts": "node ./scripts/texts/index.cjs",
32
32
  "generate-types": "node ./scripts/generateTypes/index.cjs",
33
33
  "lint": "eslint ./src",
@@ -49,6 +49,7 @@
49
49
  "license": "MIT",
50
50
  "dependencies": {
51
51
  "@nuxt/kit": "^3.13.1",
52
+ "artboard-deluxe": "^0.0.1",
52
53
  "estree-walker-ts": "^1.0.1",
53
54
  "fzf": "^0.5.2",
54
55
  "get-video-id": "^4.1.7",
@@ -95,7 +96,8 @@
95
96
  "tailwindcss": "^3.4.11",
96
97
  "vite-plugin-glsl": "^1.3.0",
97
98
  "vitepress": "^1.3.4",
98
- "vitest": "^2.0.5"
99
+ "vitest": "^2.0.5",
100
+ "vue-tsc": "^2.1.6"
99
101
  },
100
102
  "overrides": {
101
103
  "@parcel/watcher": "~2.1.0"
@@ -1,204 +0,0 @@
1
- import type { Coord, Size, Rectangle } from '#blokkli/types';
2
- type TouchDirection = 'horizontal' | 'vertical' | 'both' | 'none';
3
- /**
4
- * Implements a time-based queue.
5
- */
6
- declare class Queue<T> {
7
- queue: T[];
8
- timeQueue: number[];
9
- reset(): void;
10
- pruneQueue(ms: number): void;
11
- add(position: T): void;
12
- }
13
- /**
14
- * Implements a queue to calculate the velocity of 2D coordinates.
15
- */
16
- declare class VelocityQueue extends Queue<Coord> {
17
- max: number;
18
- constructor(max: number);
19
- getVelocity(): Coord;
20
- private limit;
21
- }
22
- declare class ScaleVelocityQueue extends Queue<number> {
23
- getVelocity(): number;
24
- }
25
- type PossibleDragEventPosition = Array<Touch | MouseEvent> | TouchList;
26
- export type ArtboardOptions = {
27
- x?: number;
28
- y?: number;
29
- scale?: number;
30
- padding?: number;
31
- scrollSpeed?: number;
32
- minScale?: number;
33
- maxScale?: number;
34
- maxVelocity?: number;
35
- getBlockingRects?: () => Rectangle[];
36
- };
37
- type AnimationTarget = Coord & {
38
- scale: number;
39
- alpha: number;
40
- speed: number;
41
- };
42
- export declare class Artboard {
43
- /**
44
- * The element containing the artboard that can be moved and zoomed.
45
- */
46
- artboardEl: HTMLElement;
47
- /**
48
- * The parent/root element that defines the area in which the artboard can be interacted with.
49
- */
50
- rootEl: HTMLElement;
51
- /**
52
- * The minimum scale amount.
53
- */
54
- minScale: number;
55
- /**
56
- * The maximum scale amount.
57
- */
58
- maxScale: number;
59
- /**
60
- * The maximum move velocity.
61
- */
62
- maxVelocity: number;
63
- /**
64
- * The current scale of the artboard.
65
- */
66
- scale: number;
67
- /**
68
- * The padding area inside the root element.
69
- */
70
- padding: number;
71
- /**
72
- * The multiplier for scrolling using the mouse wheel.
73
- */
74
- scrollSpeed: number;
75
- /**
76
- * The current arboard offset/translation.
77
- */
78
- offset: Coord;
79
- /**
80
- * The native size of the artboard (without any scaling).
81
- */
82
- artboardSize: Size;
83
- /**
84
- * The native size of the root element.
85
- */
86
- rootSize: Size;
87
- /**
88
- * The target state for the current animation.
89
- */
90
- animationTarget: AnimationTarget | null;
91
- /**
92
- * The last touch coordinate (or the midpoint of two touches when scaling).
93
- */
94
- lastTouch: Coord | null;
95
- /**
96
- * Whether the user is currently dragging the artboard.
97
- */
98
- isDragging: boolean;
99
- /**
100
- * Whether the user is currently scaling the artboard using touch gestures.
101
- */
102
- isScaling: boolean;
103
- /**
104
- * The calculated velocity of a drag gesture.
105
- */
106
- velocity: Coord;
107
- /**
108
- * The queue containing the last touches to calculate the velocity.
109
- */
110
- velocityQueue: VelocityQueue;
111
- /**
112
- * The calculated scale velocity.
113
- */
114
- scaleVelocity: number;
115
- /**
116
- * The queue containing the last scaling values during a scale gesture.
117
- */
118
- scaleVelocityQueue: ScaleVelocityQueue;
119
- /**
120
- * Whether the animation loop is performing momentum scrolling.
121
- */
122
- isMomentumScrolling: boolean;
123
- /**
124
- * The detected touch direction.
125
- */
126
- touchDirection: TouchDirection;
127
- /**
128
- * The coordinate at which the first touch event fired.
129
- */
130
- initialTouchPoint: Coord | null;
131
- /**
132
- * The offset at the time the first touch event fired.
133
- */
134
- initialOffset: Coord;
135
- scaleMidpoint: Coord | null;
136
- initialTouchDistance: number;
137
- initialScale: number;
138
- moveStartOffset: Coord | null;
139
- moveStartCoords: Coord | null;
140
- isPressingSpace: boolean;
141
- /**
142
- * Whether the user is currently touching the artboard with at least one finger.
143
- */
144
- isTouching: boolean;
145
- getBlockingRects: (() => Rectangle[]) | null;
146
- listeners: Record<string, any>;
147
- resizeObserver: ResizeObserver;
148
- scaleStartCoords: Coord | null;
149
- lastScaleTimestamp: number;
150
- /**
151
- * The timestamp of the last call to animateTo().
152
- */
153
- lastAnimateToTimestamp: number;
154
- /**
155
- * Construct a new Artboard.
156
- */
157
- constructor(el: HTMLElement, rootEl: HTMLElement, options?: ArtboardOptions);
158
- setOptions(options: ArtboardOptions): void;
159
- initListeners(): void;
160
- onKeyDown(e: KeyboardEvent): void;
161
- onKeyUp(): void;
162
- onMouseDown(e: MouseEvent): void;
163
- onMouseUp(): void;
164
- onMouseMove(e: MouseEvent): void;
165
- getDistance(a: Coord, b: Coord): number;
166
- getTouchDistance(touches: PossibleDragEventPosition): number;
167
- getMidpoint(touches: PossibleDragEventPosition): Coord;
168
- onDragStart(touches: PossibleDragEventPosition): void;
169
- onDragMove(touches: PossibleDragEventPosition): void;
170
- resetDraggingState(): void;
171
- onDragEnd(): void;
172
- onTouchStart(e: TouchEvent): void;
173
- onTouchMove(e: TouchEvent): void;
174
- onTouchEnd(e: TouchEvent): void;
175
- destroy(): void;
176
- loop(): void;
177
- getCenterX(targetScale?: number): number;
178
- animateTo(x: number, y: number, targetScale?: number): void;
179
- getEndY(): number;
180
- animateOrJumpBy(y: number): void;
181
- animateOrJumpTo(y: number): void;
182
- scrollPageUp(): void;
183
- scrollPageDown(): void;
184
- scrollPageLeft(): void;
185
- scrollPageRight(): void;
186
- scrollToTop(): void;
187
- scrollToEnd(): void;
188
- scaleToFit(): void;
189
- resetZoom(): void;
190
- updateStyles(): void;
191
- getBoundaries(providedScale?: number): {
192
- xMin: number;
193
- xMax: number;
194
- yMin: number;
195
- yMax: number;
196
- };
197
- setScale(newScale: number): void;
198
- setOffset(x: number, y: number): void;
199
- stopAnimate(): void;
200
- scaleAroundPoint(x: number, y: number, newScale: number): void;
201
- doZoom(x: number, y: number, delta: number): void;
202
- onWheel(e: WheelEvent): void;
203
- }
204
- export {};