svelte-ag 0.0.2-dev.84 → 1.0.0
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/lib/bits/internal/floating-svelte/use-floating.svelte.d.ts +1 -1
- package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.d.ts.map +1 -1
- package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.js +15 -13
- package/dist/lib/vite/vite-plugin-component-source-collector.js +1 -1
- package/package.json +5 -3
- package/src/lib/bits/internal/floating-svelte/use-floating.svelte.ts +128 -130
- package/src/lib/vite/vite-plugin-component-source-collector.ts +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { UseFloatingOptions, UseFloatingReturn } from
|
|
1
|
+
import type { UseFloatingOptions, UseFloatingReturn } from './types.js';
|
|
2
2
|
export declare function useFloating(options: UseFloatingOptions): UseFloatingReturn;
|
|
3
3
|
//# sourceMappingURL=use-floating.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-floating.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/bits/internal/floating-svelte/use-floating.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGxE,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,
|
|
1
|
+
{"version":3,"file":"use-floating.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/bits/internal/floating-svelte/use-floating.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGxE,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CA6H1E"}
|
|
@@ -1,28 +1,30 @@
|
|
|
1
|
-
import { computePosition } from
|
|
2
|
-
import { box } from
|
|
3
|
-
import { get, getDPR, roundByDPR } from
|
|
1
|
+
import { computePosition } from '@floating-ui/dom';
|
|
2
|
+
import { box } from 'svelte-toolbelt';
|
|
3
|
+
import { get, getDPR, roundByDPR } from './floating-utils.svelte.js';
|
|
4
4
|
export function useFloating(options) {
|
|
5
5
|
/** Options */
|
|
6
6
|
const whileElementsMountedOption = options.whileElementsMounted;
|
|
7
7
|
const openOption = $derived(get(options.open) ?? true);
|
|
8
8
|
const middlewareOption = $derived(get(options.middleware));
|
|
9
9
|
const transformOption = $derived(get(options.transform) ?? true);
|
|
10
|
-
const placementOption = $derived(get(options.placement) ??
|
|
11
|
-
const strategyOption = $derived(get(options.strategy) ??
|
|
10
|
+
const placementOption = $derived(get(options.placement) ?? 'bottom');
|
|
11
|
+
const strategyOption = $derived(get(options.strategy) ?? 'absolute');
|
|
12
12
|
const reference = options.reference;
|
|
13
13
|
/** State */
|
|
14
14
|
let x = $state(0);
|
|
15
15
|
let y = $state(0);
|
|
16
16
|
const floating = box(null);
|
|
17
|
+
// svelte-ignore state_referenced_locally
|
|
17
18
|
let strategy = $state(strategyOption);
|
|
19
|
+
// svelte-ignore state_referenced_locally
|
|
18
20
|
let placement = $state(placementOption);
|
|
19
21
|
let middlewareData = $state({});
|
|
20
22
|
let isPositioned = $state(false);
|
|
21
23
|
const floatingStyles = $derived.by(() => {
|
|
22
24
|
const initialStyles = {
|
|
23
25
|
position: strategy,
|
|
24
|
-
left:
|
|
25
|
-
top:
|
|
26
|
+
left: '0',
|
|
27
|
+
top: '0'
|
|
26
28
|
};
|
|
27
29
|
if (!floating.current) {
|
|
28
30
|
return initialStyles;
|
|
@@ -34,14 +36,14 @@ export function useFloating(options) {
|
|
|
34
36
|
...initialStyles,
|
|
35
37
|
transform: `translate(${xVal}px, ${yVal}px)`,
|
|
36
38
|
...(getDPR(floating.current) >= 1.5 && {
|
|
37
|
-
willChange:
|
|
38
|
-
})
|
|
39
|
+
willChange: 'transform'
|
|
40
|
+
})
|
|
39
41
|
};
|
|
40
42
|
}
|
|
41
43
|
return {
|
|
42
44
|
position: strategy,
|
|
43
45
|
left: `${xVal}px`,
|
|
44
|
-
top: `${yVal}px
|
|
46
|
+
top: `${yVal}px`
|
|
45
47
|
};
|
|
46
48
|
});
|
|
47
49
|
/** Effects */
|
|
@@ -52,7 +54,7 @@ export function useFloating(options) {
|
|
|
52
54
|
computePosition(reference.current, floating.current, {
|
|
53
55
|
middleware: middlewareOption,
|
|
54
56
|
placement: placementOption,
|
|
55
|
-
strategy: strategyOption
|
|
57
|
+
strategy: strategyOption
|
|
56
58
|
}).then((position) => {
|
|
57
59
|
x = position.x;
|
|
58
60
|
y = position.y;
|
|
@@ -63,7 +65,7 @@ export function useFloating(options) {
|
|
|
63
65
|
});
|
|
64
66
|
}
|
|
65
67
|
function cleanup() {
|
|
66
|
-
if (typeof whileElementsMountedCleanup ===
|
|
68
|
+
if (typeof whileElementsMountedCleanup === 'function') {
|
|
67
69
|
whileElementsMountedCleanup();
|
|
68
70
|
whileElementsMountedCleanup = undefined;
|
|
69
71
|
}
|
|
@@ -107,6 +109,6 @@ export function useFloating(options) {
|
|
|
107
109
|
},
|
|
108
110
|
get update() {
|
|
109
111
|
return update;
|
|
110
|
-
}
|
|
112
|
+
}
|
|
111
113
|
};
|
|
112
114
|
}
|
|
@@ -46,7 +46,7 @@ export default function componentSourceCollector(opts = { run: true }) {
|
|
|
46
46
|
console.log('tailwind-sources:configResolved', config.command);
|
|
47
47
|
},
|
|
48
48
|
buildStart() {
|
|
49
|
-
console.log('tailwind-sources:buildStart');
|
|
49
|
+
console.log('tailwind-sources:buildStart', componentFiles);
|
|
50
50
|
// componentFiles.clear();
|
|
51
51
|
},
|
|
52
52
|
async transform(code, id) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-ag",
|
|
3
3
|
"description": "Useful svelte components",
|
|
4
|
-
"version": "0.0
|
|
4
|
+
"version": "1.0.0",
|
|
5
5
|
"author": "Alexander Hornung",
|
|
6
6
|
"bugs": "https://github.com/ageorgeh/svelte-ag/issues",
|
|
7
7
|
"dependencies": {
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"radash": "12.1.1",
|
|
26
26
|
"devalue": "5.1.1",
|
|
27
27
|
"bottleneck": "2.19.5",
|
|
28
|
-
"ts-ag": "
|
|
28
|
+
"ts-ag": "1.0.2"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"svelte": "^5.28.2",
|
|
@@ -92,6 +92,8 @@
|
|
|
92
92
|
"svelte:sync": "svelte-kit sync",
|
|
93
93
|
"publish:local": "pnpm version prerelease --preid dev --no-git-tag-version && pnpm publish --registry http://localhost:4873 --tag dev --access public --no-git-checks --json > ./publishLocal.json",
|
|
94
94
|
"publish:prerelease": "pnpm publish --tag dev --access public --no-git-checks --registry=https://registry.npmjs.org/ --json > ./publish.json",
|
|
95
|
-
"version:prerelease": "pnpm version prerelease --preid dev --no-git-tag-version"
|
|
95
|
+
"version:prerelease": "pnpm version prerelease --preid dev --no-git-tag-version",
|
|
96
|
+
"run-publish": "pnpm publish --access public --no-git-checks --registry=https://registry.npmjs.org/ --json > ./publish.json",
|
|
97
|
+
"run-version": "pnpm version --no-git-tag-version"
|
|
96
98
|
}
|
|
97
99
|
}
|
|
@@ -1,133 +1,131 @@
|
|
|
1
|
-
import { computePosition } from
|
|
2
|
-
import { box } from
|
|
3
|
-
import type { UseFloatingOptions, UseFloatingReturn } from
|
|
4
|
-
import { get, getDPR, roundByDPR } from
|
|
1
|
+
import { computePosition } from '@floating-ui/dom';
|
|
2
|
+
import { box } from 'svelte-toolbelt';
|
|
3
|
+
import type { UseFloatingOptions, UseFloatingReturn } from './types.js';
|
|
4
|
+
import { get, getDPR, roundByDPR } from './floating-utils.svelte.js';
|
|
5
5
|
|
|
6
6
|
export function useFloating(options: UseFloatingOptions): UseFloatingReturn {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
},
|
|
132
|
-
};
|
|
7
|
+
/** Options */
|
|
8
|
+
const whileElementsMountedOption = options.whileElementsMounted;
|
|
9
|
+
const openOption = $derived(get(options.open) ?? true);
|
|
10
|
+
const middlewareOption = $derived(get(options.middleware));
|
|
11
|
+
const transformOption = $derived(get(options.transform) ?? true);
|
|
12
|
+
const placementOption = $derived(get(options.placement) ?? 'bottom');
|
|
13
|
+
const strategyOption = $derived(get(options.strategy) ?? 'absolute');
|
|
14
|
+
const reference = options.reference;
|
|
15
|
+
|
|
16
|
+
/** State */
|
|
17
|
+
let x = $state(0);
|
|
18
|
+
let y = $state(0);
|
|
19
|
+
|
|
20
|
+
const floating = box<HTMLElement | null>(null);
|
|
21
|
+
|
|
22
|
+
// svelte-ignore state_referenced_locally
|
|
23
|
+
let strategy = $state(strategyOption);
|
|
24
|
+
// svelte-ignore state_referenced_locally
|
|
25
|
+
let placement = $state(placementOption);
|
|
26
|
+
let middlewareData = $state({});
|
|
27
|
+
let isPositioned = $state(false);
|
|
28
|
+
const floatingStyles = $derived.by(() => {
|
|
29
|
+
const initialStyles = {
|
|
30
|
+
position: strategy,
|
|
31
|
+
left: '0',
|
|
32
|
+
top: '0'
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
if (!floating.current) {
|
|
36
|
+
return initialStyles;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const xVal = roundByDPR(floating.current, x);
|
|
40
|
+
const yVal = roundByDPR(floating.current, y);
|
|
41
|
+
|
|
42
|
+
if (transformOption) {
|
|
43
|
+
return {
|
|
44
|
+
...initialStyles,
|
|
45
|
+
transform: `translate(${xVal}px, ${yVal}px)`,
|
|
46
|
+
...(getDPR(floating.current) >= 1.5 && {
|
|
47
|
+
willChange: 'transform'
|
|
48
|
+
})
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return {
|
|
53
|
+
position: strategy,
|
|
54
|
+
left: `${xVal}px`,
|
|
55
|
+
top: `${yVal}px`
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
/** Effects */
|
|
60
|
+
let whileElementsMountedCleanup: (() => void) | undefined;
|
|
61
|
+
|
|
62
|
+
function update() {
|
|
63
|
+
if (reference.current === null || floating.current === null) return;
|
|
64
|
+
computePosition(reference.current, floating.current, {
|
|
65
|
+
middleware: middlewareOption,
|
|
66
|
+
placement: placementOption,
|
|
67
|
+
strategy: strategyOption
|
|
68
|
+
}).then((position) => {
|
|
69
|
+
x = position.x;
|
|
70
|
+
y = position.y;
|
|
71
|
+
strategy = position.strategy;
|
|
72
|
+
placement = position.placement;
|
|
73
|
+
middlewareData = position.middlewareData;
|
|
74
|
+
isPositioned = true;
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function cleanup() {
|
|
79
|
+
if (typeof whileElementsMountedCleanup === 'function') {
|
|
80
|
+
whileElementsMountedCleanup();
|
|
81
|
+
whileElementsMountedCleanup = undefined;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function attach() {
|
|
86
|
+
cleanup();
|
|
87
|
+
|
|
88
|
+
if (whileElementsMountedOption === undefined) {
|
|
89
|
+
update();
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
if (reference.current === null || floating.current === null) return;
|
|
94
|
+
|
|
95
|
+
whileElementsMountedCleanup = whileElementsMountedOption(reference.current, floating.current, update);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
function reset() {
|
|
99
|
+
if (!openOption) {
|
|
100
|
+
isPositioned = false;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
$effect(update);
|
|
105
|
+
$effect(attach);
|
|
106
|
+
$effect(reset);
|
|
107
|
+
$effect(() => cleanup);
|
|
108
|
+
|
|
109
|
+
return {
|
|
110
|
+
floating,
|
|
111
|
+
reference,
|
|
112
|
+
get strategy() {
|
|
113
|
+
return strategy;
|
|
114
|
+
},
|
|
115
|
+
get placement() {
|
|
116
|
+
return placement;
|
|
117
|
+
},
|
|
118
|
+
get middlewareData() {
|
|
119
|
+
return middlewareData;
|
|
120
|
+
},
|
|
121
|
+
get isPositioned() {
|
|
122
|
+
return isPositioned;
|
|
123
|
+
},
|
|
124
|
+
get floatingStyles() {
|
|
125
|
+
return floatingStyles;
|
|
126
|
+
},
|
|
127
|
+
get update() {
|
|
128
|
+
return update;
|
|
129
|
+
}
|
|
130
|
+
};
|
|
133
131
|
}
|