Skip to content

Commit

Permalink
tooltip tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@huntabyte
huntabyte committed Jun 1, 2024
1 parent 2877761 commit 97141e8
Show file tree
Hide file tree
Showing 11 changed files with 306 additions and 240 deletions.
31 changes: 17 additions & 14 deletions packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ type CheckboxRootStateProps = ReadableBoxedValues<{
}>;

class CheckboxRootState {
checked = undefined as unknown as CheckboxRootStateProps["checked"];
disabled = undefined as unknown as CheckboxRootStateProps["disabled"];
required = undefined as unknown as CheckboxRootStateProps["required"];
checked: CheckboxRootStateProps["checked"];
disabled: CheckboxRootStateProps["disabled"];
required: CheckboxRootStateProps["required"];
name: CheckboxRootStateProps["name"];
value: CheckboxRootStateProps["value"];

Expand Down Expand Up @@ -75,22 +75,25 @@ class CheckboxRootState {
//

class CheckboxInputState {
root = undefined as unknown as CheckboxRootState;
shouldRender = $derived(this.root.name.value !== undefined);
root: CheckboxRootState;
shouldRender = $derived.by(() => this.root.name.value !== undefined);

constructor(root: CheckboxRootState) {
this.root = root;
}

props = $derived({
type: "checkbox",
checked: this.root.checked.value === true,
disabled: this.root.disabled.value,
required: this.root.required.value,
name: this.root.name.value,
value: this.root.value.value,
"data-checkbox-input": "",
} as const);
props = $derived.by(
() =>
({
type: "checkbox",
checked: this.root.checked.value === true,
disabled: this.root.disabled.value,
required: this.root.required.value,
name: this.root.name.value,
value: this.root.value.value,
"data-checkbox-input": "",
}) as const
);
}

//
Expand Down
29 changes: 15 additions & 14 deletions packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,9 @@ type CollapsibleRootStateProps = WritableBoxedValues<{
}>;

class CollapsibleRootState {
open = undefined as unknown as CollapsibleRootStateProps["open"];
disabled = undefined as unknown as CollapsibleRootStateProps["disabled"];
open: CollapsibleRootStateProps["open"];
disabled: CollapsibleRootStateProps["disabled"];
contentId = box.with(() => useId());
props = $derived.by(
() =>
({
"data-state": getDataOpenClosed(this.open.value),
"data-disabled": getDataDisabled(this.disabled.value),
[ROOT_ATTR]: "",
}) as const
);

constructor(props: CollapsibleRootStateProps) {
this.open = props.open;
Expand All @@ -51,6 +43,15 @@ class CollapsibleRootState {
createTrigger() {
return new CollapsibleTriggerState(this);
}

props = $derived.by(
() =>
({
"data-state": getDataOpenClosed(this.open.value),
"data-disabled": getDataDisabled(this.disabled.value),
[ROOT_ATTR]: "",
}) as const
);
}

type CollapsibleContentStateProps = ReadableBoxedValues<{
Expand All @@ -59,13 +60,13 @@ type CollapsibleContentStateProps = ReadableBoxedValues<{
}>;

class CollapsibleContentState {
root = undefined as unknown as CollapsibleRootState;
root: CollapsibleRootState;
#originalStyles: { transitionDuration: string; animationName: string } | undefined;
node = box<HTMLElement | null>(null);
#isMountAnimationPrevented = $state(false);
#width = $state(0);
#height = $state(0);
#forceMount = undefined as unknown as CollapsibleContentStateProps["forceMount"];
#forceMount: CollapsibleContentStateProps["forceMount"];
props = $derived.by(
() =>
({
Expand All @@ -83,7 +84,7 @@ class CollapsibleContentState {
[CONTENT_ATTR]: "",
}) as const
);
present = $derived(this.#forceMount.value || this.root.open.value);
present = $derived.by(() => this.#forceMount.value || this.root.open.value);

constructor(props: CollapsibleContentStateProps, root: CollapsibleRootState) {
this.root = root;
Expand Down Expand Up @@ -137,7 +138,7 @@ class CollapsibleContentState {
}

class CollapsibleTriggerState {
#root = undefined as unknown as CollapsibleRootState;
#root: CollapsibleRootState;

constructor(root: CollapsibleRootState) {
this.#root = root;
Expand Down
9 changes: 1 addition & 8 deletions packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,13 +418,6 @@ class MenuItemSharedState {
});
};

// #onpointerup = (e: PointerEvent) => {
// if (!this.content.parentMenu.root.isUsingKeyboard.value && isHTMLElement(e.currentTarget)) {
// e.currentTarget?.click();
// e.preventDefault();
// }
// };

props = $derived.by(
() =>
({
Expand Down Expand Up @@ -632,7 +625,7 @@ class MenuSubTriggerState {
onpointermove: this.#onpointermove,
onpointerleave: this.#onpointerleave,
onkeydown: this.#onkeydown,
})
} as const)
);
}

Expand Down
88 changes: 51 additions & 37 deletions packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import {
import type { Orientation } from "$lib/shared/index.js";
import { createContext } from "$lib/internal/createContext.js";

const ROOT_ATTR = "data-pagination-root";
const PAGE_ATTR = "data-pagination-page";
const PREV_ATTR = "data-pagination-prev";
const NEXT_ATTR = "data-pagination-next";

type PaginationRootStateProps = ReadableBoxedValues<{
id: string;
count: number;
Expand All @@ -25,21 +30,21 @@ type PaginationRootStateProps = ReadableBoxedValues<{
}>;

class PaginationRootState {
id = undefined as unknown as PaginationRootStateProps["id"];
orientation = undefined as unknown as PaginationRootStateProps["orientation"];
id: PaginationRootStateProps["id"];
orientation: PaginationRootStateProps["orientation"];
node = box<HTMLElement | null>(null);
count = undefined as unknown as PaginationRootStateProps["count"];
perPage = undefined as unknown as PaginationRootStateProps["perPage"];
siblingCount = undefined as unknown as PaginationRootStateProps["siblingCount"];
page = undefined as unknown as PaginationRootStateProps["page"];
loop = undefined as unknown as PaginationRootStateProps["loop"];
totalPages = $derived(Math.ceil(this.count.value / this.perPage.value));
count: PaginationRootStateProps["count"];
perPage: PaginationRootStateProps["perPage"];
siblingCount: PaginationRootStateProps["siblingCount"];
page: PaginationRootStateProps["page"];
loop: PaginationRootStateProps["loop"];
totalPages = $derived.by(() => Math.ceil(this.count.value / this.perPage.value));
range = $derived.by(() => {
const start = (this.page.value - 1) * this.perPage.value;
const end = Math.min(start + this.perPage.value, this.count.value);
return { start, end };
});
pages = $derived(
pages = $derived.by(() =>
getPageItems({
page: this.page.value,
totalPages: this.totalPages,
Expand Down Expand Up @@ -90,11 +95,14 @@ class PaginationRootState {
return new PaginationButtonState(props, this);
}

props = $derived({
id: this.id.value,
"data-pagination-root": "",
"data-orientation": getDataOrientation(this.orientation.value),
});
props = $derived.by(
() =>
({
id: this.id.value,
"data-orientation": getDataOrientation(this.orientation.value),
[ROOT_ATTR]: "",
}) as const
);
}

//
Expand All @@ -107,10 +115,10 @@ type PaginationPageStateProps = ReadableBoxedValues<{
}>;

class PaginationPage {
#id = undefined as unknown as PaginationPageStateProps["id"];
#root = undefined as unknown as PaginationRootState;
#id: PaginationPageStateProps["id"];
#root: PaginationRootState;
#node = box<HTMLElement | null>(null);
page = undefined as unknown as PaginationPageStateProps["page"];
page: PaginationPageStateProps["page"];

constructor(props: PaginationPageStateProps, root: PaginationRootState) {
this.#root = root;
Expand All @@ -127,16 +135,19 @@ class PaginationPage {
handleTriggerKeydown(e, this.#node.value, this.#root);
};

props = $derived({
id: this.#id.value,
"aria-label": `Page ${this.page.value}`,
"data-value": `${this.page.value}`,
"data-pagination-page": "",
"data-selected": this.page.value.value === this.#root.page.value ? "" : undefined,
//
onclick: this.#onclick,
onkeydown: this.#onkeydown,
} as const);
props = $derived.by(
() =>
({
id: this.#id.value,
"aria-label": `Page ${this.page.value}`,
"data-value": `${this.page.value}`,
"data-selected": this.page.value.value === this.#root.page.value ? "" : undefined,
[PAGE_ATTR]: "",
//
onclick: this.#onclick,
onkeydown: this.#onkeydown,
}) as const
);
}

//
Expand All @@ -150,8 +161,8 @@ type PaginationButtonStateProps = ReadableBoxedValues<{
};

class PaginationButtonState {
id = undefined as unknown as PaginationButtonStateProps["id"];
#root = undefined as unknown as PaginationRootState;
id: PaginationButtonStateProps["id"];
#root: PaginationRootState;
node = box<HTMLElement | null>(null);
type = $state() as PaginationButtonStateProps["type"];

Expand All @@ -170,14 +181,17 @@ class PaginationButtonState {
handleTriggerKeydown(e, this.node.value, this.#root);
};

props = $derived({
id: this.id.value,
"data-pagination-prev": this.type === "prev" ? "" : undefined,
"data-pagination-next": this.type === "next" ? "" : undefined,
//
onclick: this.#onclick,
onkeydown: this.#onkeydown,
} as const);
props = $derived.by(
() =>
({
id: this.id.value,
[PREV_ATTR]: this.type === "prev" ? "" : undefined,
[NEXT_ATTR]: this.type === "next" ? "" : undefined,
//
onclick: this.#onclick,
onkeydown: this.#onkeydown,
}) as const
);
}

//
Expand Down
4 changes: 0 additions & 4 deletions packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@
child,
value,
disabled = false,
onclick = () => {},
onkeydown = () => {},
el = $bindable(),
style = {},
...restProps
Expand All @@ -22,8 +20,6 @@
value: box.with(() => value),
disabled: box.with(() => disabled),
id: box.with(() => id),
onclick: box.with(() => onclick),
onkeydown: box.with(() => onkeydown),
});
const mergedProps = $derived({
Expand Down
Loading

0 comments on commit 97141e8

Please sign in to comment.