uiik 1.0.9 → 1.3.0-alpha
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/CHANGELOG.md +22 -0
- package/README.md +7 -0
- package/{types/detector.d.ts → detector.d.ts} +0 -19
- package/draggable.d.ts +8 -0
- package/droppable.d.ts +9 -0
- package/{types/index.d.ts → index.d.ts} +5 -0
- package/index.esm.js +1852 -1253
- package/index.js +1914 -1296
- package/package.json +5 -5
- package/resizable.d.ts +7 -0
- package/rotatable.d.ts +6 -0
- package/selectable.d.ts +8 -0
- package/sortable.d.ts +9 -0
- package/splittable.d.ts +6 -0
- package/transform.d.ts +19 -0
- package/types.d.ts +286 -0
- package/utils.d.ts +51 -0
- package/types/draggable.d.ts +0 -25
- package/types/droppable.d.ts +0 -30
- package/types/resizable.d.ts +0 -19
- package/types/rotatable.d.ts +0 -23
- package/types/selectable.d.ts +0 -32
- package/types/splittable.d.ts +0 -23
- package/types/types.d.ts +0 -320
- package/types/utils.d.ts +0 -22
package/CHANGELOG.md
CHANGED
|
@@ -1 +1,23 @@
|
|
|
1
1
|
# Changelog
|
|
2
|
+
|
|
3
|
+
## [1.3.0] - 2023/10/4 ⚠️BreakChange
|
|
4
|
+
### 优化
|
|
5
|
+
- 重构 draggable/resizable/rotatable/selectable,支持transform变形后的操作识别
|
|
6
|
+
- 重新设计的事件框架,优化执行流
|
|
7
|
+
### 新增
|
|
8
|
+
- handle 属性变更,支持更多类型
|
|
9
|
+
- onPointerDown 事件,可用于阻止后续逻辑
|
|
10
|
+
- draggable watch参数,可用于dom变动自动检测
|
|
11
|
+
|
|
12
|
+
## [1.2.0] - 2023/9/3
|
|
13
|
+
### Add
|
|
14
|
+
- SVG support —— draggable/resizable/selectable/rotatable
|
|
15
|
+
|
|
16
|
+
## [1.1.0] - 2023/6/6 ⚠️BreakChange
|
|
17
|
+
### Add
|
|
18
|
+
- Sortable
|
|
19
|
+
### Optimize
|
|
20
|
+
- Unified events params to {data,ev}
|
|
21
|
+
- Modularity
|
|
22
|
+
### Change
|
|
23
|
+
- Switch the func-lib to myfx
|
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@ A UI interaction kit includes draggable, splittable, rotatable, selectable, etc.
|
|
|
12
12
|
- Draggable/Droppable/Splittable/rotatable/selectable/Resizable
|
|
13
13
|
- Customizable CSS interfaces like 'uii-draggable-handle', 'uii-splittable-handle'...
|
|
14
14
|
- Rich options
|
|
15
|
+
- SVG support
|
|
15
16
|
|
|
16
17
|
## Quick start
|
|
17
18
|
1. install
|
|
@@ -28,6 +29,12 @@ import {Splittable} from 'uiik'
|
|
|
28
29
|
//or
|
|
29
30
|
import uiik from 'https://cdn.skypack.dev/uiik'
|
|
30
31
|
```
|
|
32
|
+
3. import module
|
|
33
|
+
```ts
|
|
34
|
+
import {newSplittable} from 'uiik/splittable'
|
|
35
|
+
//or
|
|
36
|
+
import {newSortable} from 'uiik/sortable'
|
|
37
|
+
```
|
|
31
38
|
|
|
32
39
|
## Development
|
|
33
40
|
1. use `test` to do jest
|
|
@@ -6,29 +6,10 @@ export declare class CollisionDetector {
|
|
|
6
6
|
elData: CollisionData;
|
|
7
7
|
opts: Record<string, any>;
|
|
8
8
|
constructor(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection, opts?: CollisionDetectorOptions);
|
|
9
|
-
/**
|
|
10
|
-
* update targets data if them changed
|
|
11
|
-
*/
|
|
12
9
|
update(): void;
|
|
13
|
-
/**
|
|
14
|
-
* detect targets and return overlaps
|
|
15
|
-
* @returns
|
|
16
|
-
*/
|
|
17
10
|
getOverlaps(): Array<HTMLElement>;
|
|
18
11
|
getOverlaps(x1: number, y1: number, x2: number, y2: number): Array<HTMLElement>;
|
|
19
|
-
/**
|
|
20
|
-
* detect targets and return inclusions
|
|
21
|
-
* @returns
|
|
22
|
-
*/
|
|
23
12
|
getInclusions(): Array<HTMLElement>;
|
|
24
13
|
getInclusions(x1: number, y1: number, x2: number, y2: number): Array<HTMLElement>;
|
|
25
14
|
}
|
|
26
|
-
/**
|
|
27
|
-
* create a detector for the el and return
|
|
28
|
-
* @param el element to be detected
|
|
29
|
-
* @param targets
|
|
30
|
-
* @param opts CollisionDetectorOptions
|
|
31
|
-
* @param opts.container a root element of targets
|
|
32
|
-
* @returns
|
|
33
|
-
*/
|
|
34
15
|
export declare function newCollisionDetector(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection, opts?: CollisionDetectorOptions): CollisionDetector;
|
package/draggable.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DraggableOptions, Uii } from "./types";
|
|
2
|
+
export declare class Draggable extends Uii {
|
|
3
|
+
#private;
|
|
4
|
+
constructor(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DraggableOptions);
|
|
5
|
+
bindEvent(bindTarget: Element, opts: DraggableOptions, handleMap: WeakMap<Element, Element>): void;
|
|
6
|
+
onOptionChanged(opts: Record<string, any>): void;
|
|
7
|
+
}
|
|
8
|
+
export declare function newDraggable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DraggableOptions): Draggable;
|
package/droppable.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { DroppableOptions, Uii } from "./types";
|
|
2
|
+
export declare class Droppable extends Uii {
|
|
3
|
+
#private;
|
|
4
|
+
constructor(el: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions);
|
|
5
|
+
bindEvent(droppable: HTMLElement, opts: DroppableOptions): void;
|
|
6
|
+
active(target: HTMLElement): void;
|
|
7
|
+
deactive(target: HTMLElement): void;
|
|
8
|
+
}
|
|
9
|
+
export declare function newDroppable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions): Droppable;
|
|
@@ -4,14 +4,18 @@ import { newDraggable } from './draggable';
|
|
|
4
4
|
import { newDroppable } from './droppable';
|
|
5
5
|
import { newRotatable } from './rotatable';
|
|
6
6
|
import { newSelectable } from './selectable';
|
|
7
|
+
import { newSortable } from './sortable';
|
|
7
8
|
export * from './splittable';
|
|
8
9
|
export * from './resizable';
|
|
9
10
|
export * from './draggable';
|
|
10
11
|
export * from './droppable';
|
|
11
12
|
export * from './rotatable';
|
|
12
13
|
export * from './selectable';
|
|
14
|
+
export * from './sortable';
|
|
13
15
|
export * from './detector';
|
|
14
16
|
export * from './types';
|
|
17
|
+
export * from './transform';
|
|
18
|
+
export * from './utils';
|
|
15
19
|
export declare const VERSION: string;
|
|
16
20
|
declare const _default: {
|
|
17
21
|
VERSION: string;
|
|
@@ -21,5 +25,6 @@ declare const _default: {
|
|
|
21
25
|
newDroppable: typeof newDroppable;
|
|
22
26
|
newRotatable: typeof newRotatable;
|
|
23
27
|
newSelectable: typeof newSelectable;
|
|
28
|
+
newSortable: typeof newSortable;
|
|
24
29
|
};
|
|
25
30
|
export default _default;
|