Skip to content
This repository was archived by the owner on Oct 14, 2025. It is now read-only.

Commit 88783e3

Browse files
huntabytehuntabyte
committed
visual testing
1 parent afe0b17 commit 88783e3

File tree

18 files changed

+475
-58
lines changed

18 files changed

+475
-58
lines changed

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
"name": "monorepo",
33
"private": true,
44
"scripts": {
5-
"dev": "pnpm -F \"./packages/**\" svelte-kit sync && pnpm -r --parallel --reporter append-only --color dev",
5+
"dev": "pnpm -F \"./packages/**\" sync && pnpm -r --parallel --reporter append-only --color dev",
66
"format": "biome check . --write",
77
"format:check": "biome check .",
88
"build": "pnpm --recursive build",
99
"build:watch": "pnpm --recursive --parallel build:watch",
1010
"test": "pnpm --recursive --reporter append-only --color test",
1111
"test:watch": "pnpm --recursive --reporter append-only --color test:watch",
12-
"sync": "pnpm --recursive sync",
13-
"postinstall": "pnpm sync"
12+
"sync": "pnpm --recursive sync"
1413
},
1514
"devDependencies": {
1615
"@biomejs/biome": "^1.9.4",

‎packages/floating-ui-svelte/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66
"build": "svelte-package --input ./src",
77
"build:watch": "pnpm build --watch",
88
"test": "vitest run",
9-
"dev:visual": "vite",
9+
"dev:visual": "vite dev",
1010
"dev:build": "pnpm build:watch",
1111
"test:watch": "pnpm test --watch",
1212
"sync": "svelte-kit sync && pnpm build"
1313
},
14-
"files": ["dist"],
14+
"files": [
15+
"dist"
16+
],
1517
"sideEffects": false,
1618
"svelte": "./dist/index.js",
1719
"types": "./dist/index.d.ts",
@@ -44,7 +46,7 @@
4446
"svelte": "^5.17.3",
4547
"tailwindcss": "4.0.0-beta.9",
4648
"typescript": "^5.7.2",
47-
"vite": "^6.0.6",
49+
"vite": "6.0.7",
4850
"vitest": "^2.1.8"
4951
},
5052
"dependencies": {

‎packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ interface UseFloatingOptions<RT extends ReferenceType = ReferenceType> {
3737
* Where to place the floating element relative to its reference element.
3838
* @default 'bottom'
3939
*/
40-
placement?: MaybeGetter<Placement>;
40+
placement?: MaybeGetter<Placement | undefined>;
4141

4242
/**
4343
* The type of CSS position property to use.

‎packages/floating-ui-svelte/svelte.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
44
/** @type {import('@sveltejs/kit').Config} */
55
const config = {
66
preprocess: [vitePreprocess()],
7+
kit: {
8+
files: {
9+
routes: "./test/visual/routes",
10+
appTemplate: "./test/visual/app.html",
11+
params: "./test/visual/params",
12+
},
13+
},
714
};
815

916
export default config;

‎packages/floating-ui-svelte/test/visual/App.svelte‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/floating-ui-svelte/test/visual/app.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
@import "tailwindcss";
1+
@import "tailwindcss";
2+
3+
button {
4+
@apply cursor-default;
5+
}
6+
7+
.scrollbar-none::-webkit-scrollbar {
8+
display: none;
9+
}
10+
.scrollbar-none {
11+
-ms-overflow-style: none; /* IE and Edge */
12+
scrollbar-width: none; /* Firefox */
13+
}

‎packages/floating-ui-svelte/test/visual/app.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎packages/floating-ui-svelte/test/visual/app.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div>%sveltekit.body%</div>
11+
</body>
12+
</html>

‎packages/floating-ui-svelte/test/visual/components/arrow/demo.svelte‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<script lang="ts">
2+
import type { Placement } from "@floating-ui/utils";
3+
import type { ComponentProps, Snippet } from "svelte";
4+
import FloatingArrow from "../../../../src/components/floating-arrow.svelte";
5+
import type { HTMLAttributes } from "svelte/elements";
6+
import type { Middleware } from "@floating-ui/dom";
7+
import { useFloating } from "../../../../src/index.js";
8+
import { arrow, autoUpdate, offset } from "@floating-ui/dom";
9+
import {
10+
styleObjectToString,
11+
styleStringToObject,
12+
} from "../../../../src/internal/style-object-to-string.js";
13+
import type { PropertiesHyphen } from "csstype";
14+
15+
let {
16+
placement: placementProp,
17+
arrowProps,
18+
middleware,
19+
floatingProps,
20+
floatingStyle,
21+
children,
22+
}: {
23+
placement?: Placement;
24+
arrowProps?: Partial<ComponentProps<typeof FloatingArrow>>;
25+
floatingStyle?: PropertiesHyphen;
26+
floatingProps?: HTMLAttributes<HTMLDivElement>;
27+
middleware?: Array<Middleware>;
28+
children?: Snippet;
29+
} = $props();
30+
31+
let open = $state(true);
32+
33+
// biome-ignore lint/style/noNonNullAssertion: <explanation>
34+
let arrowRef: SVGSVGElement = $state(null!);
35+
36+
const f = useFloating({
37+
placement: () => placementProp,
38+
open: () => open,
39+
onOpenChange: (v) => {
40+
open = v;
41+
},
42+
whileElementsMounted: autoUpdate,
43+
middleware: () => [
44+
offset(8),
45+
...(middleware ?? []),
46+
arrow({ element: arrowRef }),
47+
],
48+
});
49+
50+
const edgeAlignment = $derived(placementProp?.split("-")[1]);
51+
</script>
52+
53+
<div>
54+
<span
55+
bind:this={f.reference}
56+
style="background: royalblue; padding: 5; color: white;">
57+
{f.placement}
58+
</span>
59+
{#if open}
60+
<div
61+
bind:this={f.floating}
62+
class="bg-black text-white p-2 bg-clip-padding"
63+
{...floatingProps}
64+
style={styleObjectToString({
65+
visibility: f.middlewareData.hide?.referenceHidden
66+
? "hidden"
67+
: "visible",
68+
...styleStringToObject(f.floatingStyles),
69+
...floatingStyle,
70+
})}>
71+
{#if children}
72+
{@render children?.()}
73+
{:else}
74+
Tooltip
75+
{/if}
76+
<FloatingArrow
77+
context={f.context}
78+
bind:ref={arrowRef}
79+
staticOffset={edgeAlignment ? "15%" : null}
80+
{...arrowProps} />
81+
</div>
82+
{/if}
83+
</div>

‎packages/floating-ui-svelte/test/visual/index.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)