@sveltek/attachments 0.2.1 → 0.2.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/index.d.ts +94 -0
- package/dist/index.js +66 -0
- package/package.json +12 -12
- package/dist/index.d.mts +0 -89
- package/dist/index.mjs +0 -77
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { Attachment } from "svelte/attachments";
|
|
2
|
+
|
|
3
|
+
//#region src/attachments/click-outside/attachment.d.ts
|
|
4
|
+
declare function clickOutside(callback: (event: MouseEvent) => void, options?: ClickOutsideOptions): Attachment;
|
|
5
|
+
//#endregion
|
|
6
|
+
//#region src/attachments/click-outside/types.d.ts
|
|
7
|
+
interface ClickOutsideOptions {
|
|
8
|
+
event?: {
|
|
9
|
+
/**
|
|
10
|
+
* @default document
|
|
11
|
+
*/
|
|
12
|
+
target?: Element | Document | Window;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* @default undefined
|
|
16
|
+
*/
|
|
17
|
+
trigger?: Element | null | (Element | null)[];
|
|
18
|
+
}
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/attachments/keyboard/attachment.d.ts
|
|
21
|
+
declare function keyboard(callback: (event: KeyboardEvent) => void, options?: KeyboardOptions): Attachment;
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/attachments/keyboard/types.d.ts
|
|
24
|
+
interface KeyboardOptions {
|
|
25
|
+
event?: {
|
|
26
|
+
/**
|
|
27
|
+
* @default 'keydown'
|
|
28
|
+
*/
|
|
29
|
+
type?: 'keydown' | 'keyup';
|
|
30
|
+
/**
|
|
31
|
+
* @default this
|
|
32
|
+
*/
|
|
33
|
+
target?: Element | Document | Window;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* @default undefined
|
|
37
|
+
*/
|
|
38
|
+
keys?: string[];
|
|
39
|
+
}
|
|
40
|
+
//#endregion
|
|
41
|
+
//#region src/attachments/prevent-scroll/attachment.d.ts
|
|
42
|
+
declare function preventScroll(options?: PreventScrollOptions): Attachment;
|
|
43
|
+
//#endregion
|
|
44
|
+
//#region src/attachments/prevent-scroll/types.d.ts
|
|
45
|
+
interface PreventScrollOptions {
|
|
46
|
+
/**
|
|
47
|
+
* @default undefined
|
|
48
|
+
*/
|
|
49
|
+
target?: Element | Document | Window;
|
|
50
|
+
/**
|
|
51
|
+
* @default (e: Event): void => e.preventDefault()
|
|
52
|
+
*/
|
|
53
|
+
handler?: (e: Event) => void;
|
|
54
|
+
/**
|
|
55
|
+
* @default (e: KeyboardEvent): void => { if (keys.includes(e.key)) e.preventDefault() }
|
|
56
|
+
*/
|
|
57
|
+
handlerKey?: (e: KeyboardEvent) => void;
|
|
58
|
+
wheel?: {
|
|
59
|
+
/**
|
|
60
|
+
* @default true
|
|
61
|
+
*/
|
|
62
|
+
enable?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* @default this
|
|
65
|
+
*/
|
|
66
|
+
target?: Element | Document | Window;
|
|
67
|
+
};
|
|
68
|
+
touchmove?: {
|
|
69
|
+
/**
|
|
70
|
+
* @default true
|
|
71
|
+
*/
|
|
72
|
+
enable?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* @default this
|
|
75
|
+
*/
|
|
76
|
+
target?: Element | Document | Window;
|
|
77
|
+
};
|
|
78
|
+
keydown?: {
|
|
79
|
+
/**
|
|
80
|
+
* @default true
|
|
81
|
+
*/
|
|
82
|
+
enable?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* @default document
|
|
85
|
+
*/
|
|
86
|
+
target?: Element | Document | Window;
|
|
87
|
+
/**
|
|
88
|
+
* @default ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','PageDown','PageUp','Home','End',' '],
|
|
89
|
+
*/
|
|
90
|
+
keys?: string[];
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
//#endregion
|
|
94
|
+
export { ClickOutsideOptions, KeyboardOptions, PreventScrollOptions, clickOutside, keyboard, preventScroll };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
//#region src/attachments/click-outside/attachment.ts
|
|
2
|
+
function clickOutside(callback, options = {}) {
|
|
3
|
+
return (el) => {
|
|
4
|
+
const { event: { target = document } = {}, trigger } = options;
|
|
5
|
+
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
6
|
+
const handler = (event) => {
|
|
7
|
+
const target$1 = event.target;
|
|
8
|
+
if (el.contains(target$1) || triggers.some((v) => v?.contains(target$1))) return;
|
|
9
|
+
callback(event);
|
|
10
|
+
};
|
|
11
|
+
target.addEventListener("click", handler, true);
|
|
12
|
+
return () => {
|
|
13
|
+
target.removeEventListener("click", handler, true);
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region src/attachments/keyboard/attachment.ts
|
|
20
|
+
function keyboard(callback, options = {}) {
|
|
21
|
+
return (el) => {
|
|
22
|
+
const { event: { type = "keydown", target = el } = {}, keys } = options;
|
|
23
|
+
const handler = (event) => {
|
|
24
|
+
if (!keys || keys.includes(event.key)) callback(event);
|
|
25
|
+
};
|
|
26
|
+
target.addEventListener(type, handler);
|
|
27
|
+
return () => {
|
|
28
|
+
target.removeEventListener(type, handler);
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/attachments/prevent-scroll/attachment.ts
|
|
35
|
+
function preventScroll(options = {}) {
|
|
36
|
+
return (el) => {
|
|
37
|
+
const keys = options.keydown?.keys || [
|
|
38
|
+
"ArrowLeft",
|
|
39
|
+
"ArrowRight",
|
|
40
|
+
"ArrowUp",
|
|
41
|
+
"ArrowDown",
|
|
42
|
+
"PageDown",
|
|
43
|
+
"PageUp",
|
|
44
|
+
"Home",
|
|
45
|
+
"End",
|
|
46
|
+
" "
|
|
47
|
+
];
|
|
48
|
+
const { target, handler = (e) => e.preventDefault(), handlerKey = (e) => {
|
|
49
|
+
if (keys.includes(e.key)) e.preventDefault();
|
|
50
|
+
}, wheel: { enable: wheelEnable = true, target: wheelEl = el } = {}, touchmove: { enable: touchEnable = true, target: touchEl = el } = {}, keydown: { enable: keyEnable = true, target: keyEl = document } = {} } = options;
|
|
51
|
+
const wheelTarget = target || wheelEl;
|
|
52
|
+
const touchTarget = target || touchEl;
|
|
53
|
+
const keyTarget = target || keyEl;
|
|
54
|
+
if (wheelEnable) wheelTarget.addEventListener("wheel", handler, { passive: false });
|
|
55
|
+
if (touchEnable) touchTarget.addEventListener("touchmove", handler, { passive: false });
|
|
56
|
+
if (keyEnable) keyTarget.addEventListener("keydown", handlerKey);
|
|
57
|
+
return () => {
|
|
58
|
+
if (wheelEnable) wheelTarget.removeEventListener("wheel", handler);
|
|
59
|
+
if (touchEnable) touchTarget.removeEventListener("touchmove", handler);
|
|
60
|
+
if (keyEnable) keyTarget.removeEventListener("keydown", handlerKey);
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
//#endregion
|
|
66
|
+
export { clickOutside, keyboard, preventScroll };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sveltek/attachments",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"author": "Sveltek",
|
|
5
5
|
"description": "A collection of custom attachments for Svelte.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,17 +45,17 @@
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@hypernym/bundler": "^0.
|
|
49
|
-
"@sveltejs/adapter-static": "^3.0.
|
|
50
|
-
"@sveltejs/kit": "^2.
|
|
51
|
-
"@sveltek/eslint-config": "^1.1.
|
|
52
|
-
"@sveltek/prettier-config": "^1.0.
|
|
53
|
-
"@types/node": "^24.
|
|
54
|
-
"eslint": "^9.
|
|
55
|
-
"prettier": "^3.
|
|
56
|
-
"svelte": "^5.
|
|
57
|
-
"typescript": "^5.
|
|
58
|
-
"vite": "^7.
|
|
48
|
+
"@hypernym/bundler": "^0.31.0",
|
|
49
|
+
"@sveltejs/adapter-static": "^3.0.10",
|
|
50
|
+
"@sveltejs/kit": "^2.49.2",
|
|
51
|
+
"@sveltek/eslint-config": "^1.1.3",
|
|
52
|
+
"@sveltek/prettier-config": "^1.0.5",
|
|
53
|
+
"@types/node": "^24.10.4",
|
|
54
|
+
"eslint": "^9.39.2",
|
|
55
|
+
"prettier": "^3.7.4",
|
|
56
|
+
"svelte": "^5.46.0",
|
|
57
|
+
"typescript": "^5.9.3",
|
|
58
|
+
"vite": "^7.3.0"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "hyperbundler",
|
package/dist/index.d.mts
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { Attachment } from 'svelte/attachments';
|
|
2
|
-
|
|
3
|
-
declare function clickOutside(callback: (event: MouseEvent) => void, options?: ClickOutsideOptions): Attachment;
|
|
4
|
-
|
|
5
|
-
interface ClickOutsideOptions {
|
|
6
|
-
event?: {
|
|
7
|
-
/**
|
|
8
|
-
* @default document
|
|
9
|
-
*/
|
|
10
|
-
target?: Element | Document | Window;
|
|
11
|
-
};
|
|
12
|
-
/**
|
|
13
|
-
* @default undefined
|
|
14
|
-
*/
|
|
15
|
-
trigger?: Element | null | (Element | null)[];
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
declare function keyboard(callback: (event: KeyboardEvent) => void, options?: KeyboardOptions): Attachment;
|
|
19
|
-
|
|
20
|
-
interface KeyboardOptions {
|
|
21
|
-
event?: {
|
|
22
|
-
/**
|
|
23
|
-
* @default 'keydown'
|
|
24
|
-
*/
|
|
25
|
-
type?: 'keydown' | 'keyup';
|
|
26
|
-
/**
|
|
27
|
-
* @default this
|
|
28
|
-
*/
|
|
29
|
-
target?: Element | Document | Window;
|
|
30
|
-
};
|
|
31
|
-
/**
|
|
32
|
-
* @default undefined
|
|
33
|
-
*/
|
|
34
|
-
keys?: string[];
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
declare function preventScroll(options?: PreventScrollOptions): Attachment;
|
|
38
|
-
|
|
39
|
-
interface PreventScrollOptions {
|
|
40
|
-
/**
|
|
41
|
-
* @default undefined
|
|
42
|
-
*/
|
|
43
|
-
target?: Element | Document | Window;
|
|
44
|
-
/**
|
|
45
|
-
* @default (e: Event): void => e.preventDefault()
|
|
46
|
-
*/
|
|
47
|
-
handler?: (e: Event) => void;
|
|
48
|
-
/**
|
|
49
|
-
* @default (e: KeyboardEvent): void => { if (keys.includes(e.key)) e.preventDefault() }
|
|
50
|
-
*/
|
|
51
|
-
handlerKey?: (e: KeyboardEvent) => void;
|
|
52
|
-
wheel?: {
|
|
53
|
-
/**
|
|
54
|
-
* @default true
|
|
55
|
-
*/
|
|
56
|
-
enable?: boolean;
|
|
57
|
-
/**
|
|
58
|
-
* @default this
|
|
59
|
-
*/
|
|
60
|
-
target?: Element | Document | Window;
|
|
61
|
-
};
|
|
62
|
-
touchmove?: {
|
|
63
|
-
/**
|
|
64
|
-
* @default true
|
|
65
|
-
*/
|
|
66
|
-
enable?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* @default this
|
|
69
|
-
*/
|
|
70
|
-
target?: Element | Document | Window;
|
|
71
|
-
};
|
|
72
|
-
keydown?: {
|
|
73
|
-
/**
|
|
74
|
-
* @default true
|
|
75
|
-
*/
|
|
76
|
-
enable?: boolean;
|
|
77
|
-
/**
|
|
78
|
-
* @default document
|
|
79
|
-
*/
|
|
80
|
-
target?: Element | Document | Window;
|
|
81
|
-
/**
|
|
82
|
-
* @default ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','PageDown','PageUp','Home','End',' '],
|
|
83
|
-
*/
|
|
84
|
-
keys?: string[];
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
export { clickOutside, keyboard, preventScroll };
|
|
89
|
-
export type { ClickOutsideOptions, KeyboardOptions, PreventScrollOptions };
|
package/dist/index.mjs
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
function clickOutside(callback, options = {}) {
|
|
2
|
-
return (el) => {
|
|
3
|
-
const { event: { target = document } = {}, trigger } = options;
|
|
4
|
-
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
5
|
-
const handler = (event) => {
|
|
6
|
-
const target2 = event.target;
|
|
7
|
-
if (el.contains(target2) || triggers.some((v) => v?.contains(target2))) {
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
callback(event);
|
|
11
|
-
};
|
|
12
|
-
target.addEventListener("click", handler, true);
|
|
13
|
-
return () => {
|
|
14
|
-
target.removeEventListener("click", handler, true);
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function keyboard(callback, options = {}) {
|
|
20
|
-
return (el) => {
|
|
21
|
-
const { event: { type = "keydown", target = el } = {}, keys } = options;
|
|
22
|
-
const handler = (event) => {
|
|
23
|
-
if (!keys || keys.includes(event.key)) callback(event);
|
|
24
|
-
};
|
|
25
|
-
target.addEventListener(type, handler);
|
|
26
|
-
return () => {
|
|
27
|
-
target.removeEventListener(type, handler);
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function preventScroll(options = {}) {
|
|
33
|
-
return (el) => {
|
|
34
|
-
const keys = options.keydown?.keys || [
|
|
35
|
-
"ArrowLeft",
|
|
36
|
-
"ArrowRight",
|
|
37
|
-
"ArrowUp",
|
|
38
|
-
"ArrowDown",
|
|
39
|
-
"PageDown",
|
|
40
|
-
"PageUp",
|
|
41
|
-
"Home",
|
|
42
|
-
"End",
|
|
43
|
-
" "
|
|
44
|
-
];
|
|
45
|
-
const {
|
|
46
|
-
target,
|
|
47
|
-
handler = (e) => e.preventDefault(),
|
|
48
|
-
handlerKey = (e) => {
|
|
49
|
-
if (keys.includes(e.key)) e.preventDefault();
|
|
50
|
-
},
|
|
51
|
-
wheel: { enable: wheelEnable = true, target: wheelEl = el } = {},
|
|
52
|
-
touchmove: { enable: touchEnable = true, target: touchEl = el } = {},
|
|
53
|
-
keydown: { enable: keyEnable = true, target: keyEl = document } = {}
|
|
54
|
-
} = options;
|
|
55
|
-
const wheelTarget = target || wheelEl;
|
|
56
|
-
const touchTarget = target || touchEl;
|
|
57
|
-
const keyTarget = target || keyEl;
|
|
58
|
-
if (wheelEnable) {
|
|
59
|
-
wheelTarget.addEventListener("wheel", handler, { passive: false });
|
|
60
|
-
}
|
|
61
|
-
if (touchEnable) {
|
|
62
|
-
touchTarget.addEventListener("touchmove", handler, { passive: false });
|
|
63
|
-
}
|
|
64
|
-
if (keyEnable) {
|
|
65
|
-
keyTarget.addEventListener("keydown", handlerKey);
|
|
66
|
-
}
|
|
67
|
-
return () => {
|
|
68
|
-
if (wheelEnable) wheelTarget.removeEventListener("wheel", handler);
|
|
69
|
-
if (touchEnable) touchTarget.removeEventListener("touchmove", handler);
|
|
70
|
-
if (keyEnable) {
|
|
71
|
-
keyTarget.removeEventListener("keydown", handlerKey);
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export { clickOutside, keyboard, preventScroll };
|