svelte-flexiboards 0.4.1 → 0.4.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.
Files changed (33) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +15 -15
  3. package/dist/components/flexi-add.svelte +74 -74
  4. package/dist/components/flexi-announcer.svelte +24 -24
  5. package/dist/components/flexi-board.svelte +58 -58
  6. package/dist/components/flexi-delete.svelte +54 -54
  7. package/dist/components/flexi-grab.svelte +28 -28
  8. package/dist/components/flexi-grid.svelte +27 -27
  9. package/dist/components/flexi-layout-loader.svelte +10 -10
  10. package/dist/components/flexi-portal.svelte +14 -14
  11. package/dist/components/flexi-resize.svelte +30 -30
  12. package/dist/components/flexi-target-loader.svelte +14 -14
  13. package/dist/components/flexi-target.svelte +104 -104
  14. package/dist/components/flexi-widget.svelte +81 -81
  15. package/dist/components/rendered-flexi-widget.svelte +64 -64
  16. package/dist/components/responsive-flexi-board.svelte +83 -83
  17. package/dist/components/widget-transition-placeholder.svelte +12 -12
  18. package/dist/system/board/controller.svelte.d.ts +8 -8
  19. package/dist/system/internal-types.d.ts +109 -0
  20. package/dist/system/internal-types.js +1 -0
  21. package/dist/system/misc/adder.svelte.d.ts +2 -2
  22. package/dist/system/portal.d.ts +3 -3
  23. package/dist/system/shared/event-bus.d.ts +15 -14
  24. package/dist/system/shared/utils.svelte.d.ts +4 -3
  25. package/dist/system/shared/utils.svelte.js +10 -10
  26. package/dist/system/target/controller.svelte.d.ts +12 -11
  27. package/dist/system/target/controller.svelte.js +1 -1
  28. package/dist/system/target/types.d.ts +2 -2
  29. package/dist/system/types.d.ts +26 -27
  30. package/dist/system/widget/controller.svelte.d.ts +6 -6
  31. package/dist/system/widget/controller.svelte.js +1 -2
  32. package/dist/system/widget/triggers.svelte.js +9 -0
  33. package/package.json +60 -61
@@ -1,10 +1,9 @@
1
- import type { InternalFlexiTargetController } from './target/controller.svelte.js';
2
- import type { FlexiAddController, InternalFlexiAddController } from './misc/adder.svelte.js';
1
+ import type { FlexiTargetController } from './target/index.js';
2
+ import type { FlexiAddController } from './misc/adder.svelte.js';
3
3
  import type { FlexiWidgetController } from './widget/base.svelte.js';
4
- import type { InternalFlexiBoardController } from './board/controller.svelte.js';
5
- import type { InternalFlexiWidgetController } from './widget/controller.svelte.js';
4
+ import type { FlexiBoardController } from './board/base.svelte.js';
6
5
  import type { FlexiLayout } from './board/types.js';
7
- import type { InternalResponsiveFlexiBoardController } from './responsive/controller.svelte.js';
6
+ import type { ResponsiveFlexiBoardController } from './responsive/base.svelte.js';
8
7
  export type ProxiedValue<T> = {
9
8
  value: T;
10
9
  };
@@ -20,7 +19,7 @@ export type WidgetResizability = 'none' | 'horizontal' | 'vertical' | 'both';
20
19
  export type WidgetDraggability = 'none' | 'movable' | 'full';
21
20
  export type WidgetGrabAction = {
22
21
  action: 'grab';
23
- widget: InternalFlexiWidgetController;
22
+ widget: FlexiWidgetController;
24
23
  offsetX: number;
25
24
  offsetY: number;
26
25
  capturedHeightPx: number;
@@ -28,7 +27,7 @@ export type WidgetGrabAction = {
28
27
  };
29
28
  export type WidgetResizeAction = {
30
29
  action: 'resize';
31
- widget: InternalFlexiWidgetController;
30
+ widget: FlexiWidgetController;
32
31
  offsetX: number;
33
32
  offsetY: number;
34
33
  left: number;
@@ -40,7 +39,7 @@ export type WidgetResizeAction = {
40
39
  };
41
40
  export type WidgetAction = WidgetGrabAction | WidgetResizeAction;
42
41
  export type WidgetGrabbedParams = {
43
- widget: InternalFlexiWidgetController;
42
+ widget: FlexiWidgetController;
44
43
  ref: HTMLElement;
45
44
  xOffset: number;
46
45
  yOffset: number;
@@ -50,7 +49,7 @@ export type WidgetGrabbedParams = {
50
49
  capturedWidth: number;
51
50
  };
52
51
  export type WidgetStartResizeParams = {
53
- widget: InternalFlexiWidgetController;
52
+ widget: FlexiWidgetController;
54
53
  xOffset: number;
55
54
  yOffset: number;
56
55
  left: number;
@@ -63,13 +62,13 @@ export type PointerMovedEvent = {
63
62
  y: number;
64
63
  };
65
64
  export type AdderWidgetReadyEvent = {
66
- adder: InternalFlexiAddController;
67
- widget: InternalFlexiWidgetController;
65
+ adder: FlexiAddController;
66
+ widget: FlexiWidgetController;
68
67
  };
69
68
  export type WidgetEvent = {
70
- target?: InternalFlexiTargetController;
71
- board: InternalFlexiBoardController;
72
- widget: InternalFlexiWidgetController;
69
+ target?: FlexiTargetController;
70
+ board: FlexiBoardController;
71
+ widget: FlexiWidgetController;
73
72
  };
74
73
  export type WidgetGrabbedEvent = WidgetEvent & {
75
74
  adder?: FlexiAddController;
@@ -81,7 +80,7 @@ export type WidgetGrabbedEvent = WidgetEvent & {
81
80
  capturedWidthPx: number;
82
81
  };
83
82
  export type WidgetResizingEvent = WidgetEvent & {
84
- target: InternalFlexiTargetController;
83
+ target: FlexiTargetController;
85
84
  offsetX: number;
86
85
  offsetY: number;
87
86
  clientX: number;
@@ -92,24 +91,24 @@ export type WidgetResizingEvent = WidgetEvent & {
92
91
  capturedWidthPx: number;
93
92
  };
94
93
  export type WidgetDroppedEvent = {
95
- widget: InternalFlexiWidgetController;
96
- board: InternalFlexiBoardController;
97
- oldTarget?: InternalFlexiTargetController;
98
- newTarget?: InternalFlexiTargetController;
94
+ widget: FlexiWidgetController;
95
+ board: FlexiBoardController;
96
+ oldTarget?: FlexiTargetController;
97
+ newTarget?: FlexiTargetController;
99
98
  };
100
99
  export type WidgetStartResizeEvent = WidgetStartResizeParams & {
101
- target: InternalFlexiTargetController;
100
+ target: FlexiTargetController;
102
101
  };
103
102
  export type WidgetOverEvent = {
104
- widget: InternalFlexiWidgetController;
103
+ widget: FlexiWidgetController;
105
104
  mousePosition: Position;
106
105
  };
107
106
  export type WidgetOutEvent = {
108
- widget: InternalFlexiWidgetController;
107
+ widget: FlexiWidgetController;
109
108
  };
110
109
  export type TargetEvent = {
111
- board: InternalFlexiBoardController;
112
- target: InternalFlexiTargetController;
110
+ board: FlexiBoardController;
111
+ target: FlexiTargetController;
113
112
  };
114
113
  export type MouseGridCellMoveEvent = {
115
114
  cellX: number;
@@ -121,7 +120,7 @@ export type GrabbedWidgetMouseEvent = {
121
120
  widget: FlexiWidgetController;
122
121
  };
123
122
  export type HoveredTargetEvent = {
124
- target: InternalFlexiTargetController;
123
+ target: FlexiTargetController;
125
124
  };
126
125
  export type WidgetActionEvent = (PointerEvent & {
127
126
  isKeyboard?: undefined;
@@ -131,10 +130,10 @@ export type WidgetActionEvent = (PointerEvent & {
131
130
  clientY: number;
132
131
  });
133
132
  export type BoardLayoutChangeEvent = {
134
- board: InternalFlexiBoardController;
133
+ board: FlexiBoardController;
135
134
  layout: FlexiLayout;
136
135
  breakpoint?: string;
137
136
  };
138
137
  export type ResponsiveLayoutImportEvent = {
139
- responsiveController: InternalResponsiveFlexiBoardController;
138
+ responsiveController: ResponsiveFlexiBoardController;
140
139
  };
@@ -1,4 +1,4 @@
1
- import type { WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
1
+ import type { InternalWidgetDroppedEvent, InternalWidgetEvent, InternalWidgetGrabbedEvent, InternalWidgetResizingEvent } from '../internal-types.js';
2
2
  import { FlexiWidgetController } from './base.svelte.js';
3
3
  import type { InternalFlexiTargetController } from '../target/controller.svelte.js';
4
4
  import { WidgetMoveInterpolator, type WidgetMovementAnimation } from './interpolator.svelte.js';
@@ -18,10 +18,10 @@ export declare class InternalFlexiWidgetController extends FlexiWidgetController
18
18
  style: string;
19
19
  readonly id: string;
20
20
  constructor(params: FlexiWidgetConstructorParams);
21
- onDropped(event: WidgetDroppedEvent): void;
22
- onGrabbed(event: WidgetGrabbedEvent): void;
23
- onResizing(event: WidgetResizingEvent): void;
24
- onReleased(event: WidgetEvent): void;
21
+ onDropped(event: InternalWidgetDroppedEvent): void;
22
+ onGrabbed(event: InternalWidgetGrabbedEvent): void;
23
+ onResizing(event: InternalWidgetResizingEvent): void;
24
+ onReleased(event: InternalWidgetEvent): void;
25
25
  /**
26
26
  * Registers a grabber to the widget.
27
27
  */
@@ -50,7 +50,7 @@ export declare class InternalFlexiWidgetController extends FlexiWidgetController
50
50
  * Deletes this widget from its target and board.
51
51
  */
52
52
  delete(): void;
53
- onDelete(event: WidgetEvent): void;
53
+ onDelete(event: InternalWidgetEvent): void;
54
54
  /**
55
55
  * Cleanup method to be called when the widget is destroyed
56
56
  */
@@ -1,8 +1,7 @@
1
1
  import { getFlexiEventBus } from '../shared/event-bus.js';
2
- import { generateUniqueId, getElementMidpoint, getPointerService } from '../shared/utils.svelte.js';
2
+ import { generateUniqueId, getPointerService } from '../shared/utils.svelte.js';
3
3
  import { FlexiWidgetController } from './base.svelte.js';
4
4
  import { WidgetMoveInterpolator } from './interpolator.svelte.js';
5
- import { WidgetPointerEventWatcher } from './triggers.svelte.js';
6
5
  export class InternalFlexiWidgetController extends FlexiWidgetController {
7
6
  #pointerService = getPointerService();
8
7
  // Grabber and resizer tracking
@@ -25,6 +25,9 @@ export class WidgetPointerEventWatcher {
25
25
  if (!isGrabPointerEvent(event)) {
26
26
  return;
27
27
  }
28
+ if (!this.#canStartWidgetEvent()) {
29
+ return;
30
+ }
28
31
  const pointerType = event.pointerType;
29
32
  const triggerForType = this.#triggerConfig[pointerType] ?? this.#triggerConfig.default;
30
33
  event.preventDefault();
@@ -34,6 +37,12 @@ export class WidgetPointerEventWatcher {
34
37
  return this.#triggerWidgetEvent(event);
35
38
  }
36
39
  #eventTimeout = null;
40
+ #canStartWidgetEvent() {
41
+ if (this.#type == 'resize') {
42
+ return this.#widget.resizable;
43
+ }
44
+ return this.#widget.isGrabbable;
45
+ }
37
46
  #handleLongPress(event, trigger) {
38
47
  if (this.#eventTimeout) {
39
48
  clearTimeout(this.#eventTimeout);
package/package.json CHANGED
@@ -1,62 +1,61 @@
1
1
  {
2
- "name": "svelte-flexiboards",
3
- "licence": "MIT",
4
- "version": "0.4.1",
5
- "description": "The headless drag-and-drop toolkit for Svelte.",
6
- "scripts": {
7
- "dev": "pnpm watch",
8
- "dev:host": "pnpm dev",
9
- "build": "pnpm package",
10
- "package": "svelte-kit sync && svelte-package && publint",
11
- "prepublishOnly": "pnpm run package",
12
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
14
- "format": "prettier --write .",
15
- "lint": "prettier --check . && eslint .",
16
- "watch": "svelte-kit sync && svelte-package --watch",
17
- "test": "vitest run"
18
- },
19
- "files": [
20
- "dist",
21
- "!dist/**/*.test.*",
22
- "!dist/**/*.spec.*"
23
- ],
24
- "svelte": "./dist/index.js",
25
- "types": "./dist/index.d.ts",
26
- "main": "./dist/index.js",
27
- "module": "./dist/index.js",
28
- "type": "module",
29
- "exports": {
30
- ".": {
31
- "types": "./dist/index.d.ts",
32
- "svelte": "./dist/index.js",
33
- "import": "./dist/index.js",
34
- "require": "./dist/index.js"
35
- }
36
- },
37
- "peerDependencies": {
38
- "svelte": "^5.0.0"
39
- },
40
- "devDependencies": {
41
- "@sveltejs/adapter-auto": "^3.0.0",
42
- "@sveltejs/kit": "^2.0.0",
43
- "@sveltejs/package": "^2.0.0",
44
- "@sveltejs/vite-plugin-svelte": "^4.0.0",
45
- "@types/node": "^22.13.5",
46
- "@vitest/coverage-v8": "^3.0.7",
47
- "typescript": "^5.0.0",
48
- "typescript-eslint": "^8.0.0",
49
- "vite": "^5.0.11",
50
- "vitest": "^3.0.7"
51
- },
52
- "repository": {
53
- "type": "git",
54
- "url": "git+https://github.com/Blakintosh/svelte-flexiboards.git"
55
- },
56
- "author": "Blakintosh",
57
- "license": "MIT",
58
- "bugs": {
59
- "url": "https://github.com/Blakintosh/svelte-flexiboards/issues"
60
- },
61
- "homepage": "https://github.com/Blakintosh/svelte-flexiboards#readme"
62
- }
2
+ "name": "svelte-flexiboards",
3
+ "licence": "MIT",
4
+ "version": "0.4.2",
5
+ "description": "The headless drag-and-drop toolkit for Svelte.",
6
+ "files": [
7
+ "dist",
8
+ "!dist/**/*.test.*",
9
+ "!dist/**/*.spec.*"
10
+ ],
11
+ "svelte": "./dist/index.js",
12
+ "types": "./dist/index.d.ts",
13
+ "main": "./dist/index.js",
14
+ "module": "./dist/index.js",
15
+ "type": "module",
16
+ "exports": {
17
+ ".": {
18
+ "types": "./dist/index.d.ts",
19
+ "svelte": "./dist/index.js",
20
+ "import": "./dist/index.js",
21
+ "require": "./dist/index.js"
22
+ }
23
+ },
24
+ "peerDependencies": {
25
+ "svelte": "^5.0.0"
26
+ },
27
+ "devDependencies": {
28
+ "@sveltejs/adapter-auto": "^3.0.0",
29
+ "@sveltejs/kit": "^2.0.0",
30
+ "@sveltejs/package": "^2.0.0",
31
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
32
+ "@types/node": "^22.13.5",
33
+ "@vitest/coverage-v8": "^3.0.7",
34
+ "typescript": "^5.0.0",
35
+ "typescript-eslint": "^8.0.0",
36
+ "vite": "^5.0.11",
37
+ "vitest": "^3.0.7"
38
+ },
39
+ "repository": {
40
+ "type": "git",
41
+ "url": "git+https://github.com/Blakintosh/svelte-flexiboards.git"
42
+ },
43
+ "author": "Blakintosh",
44
+ "license": "MIT",
45
+ "bugs": {
46
+ "url": "https://github.com/Blakintosh/svelte-flexiboards/issues"
47
+ },
48
+ "homepage": "https://github.com/Blakintosh/svelte-flexiboards#readme",
49
+ "scripts": {
50
+ "dev": "pnpm watch",
51
+ "dev:host": "pnpm dev",
52
+ "build": "pnpm package",
53
+ "package": "svelte-kit sync && svelte-package && publint",
54
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
55
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
56
+ "format": "prettier --write .",
57
+ "lint": "prettier --check . && eslint .",
58
+ "watch": "svelte-kit sync && svelte-package --watch",
59
+ "test": "vitest run"
60
+ }
61
+ }