bits-ui 0.10.2 → 0.11.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/bits/accordion/ctx.d.ts +1 -1
- package/dist/bits/avatar/ctx.d.ts +1 -1
- package/dist/bits/calendar/_export.types.d.ts +1 -1
- package/dist/bits/calendar/_types.d.ts +12 -4
- package/dist/bits/calendar/components/{calendar-date.svelte → calendar-day.svelte} +2 -2
- package/dist/bits/calendar/components/{calendar-date.svelte.d.ts → calendar-day.svelte.d.ts} +7 -7
- package/dist/bits/calendar/components/calendar.svelte +16 -2
- package/dist/bits/calendar/ctx.d.ts +1 -1
- package/dist/bits/calendar/ctx.js +1 -1
- package/dist/bits/calendar/index.d.ts +1 -1
- package/dist/bits/calendar/index.js +1 -1
- package/dist/bits/calendar/types.d.ts +3 -3
- package/dist/bits/checkbox/ctx.d.ts +1 -1
- package/dist/bits/date-picker/_export.types.d.ts +1 -1
- package/dist/bits/date-picker/components/{date-picker-date.svelte → date-picker-day.svelte} +1 -1
- package/dist/bits/date-picker/components/{date-picker-date.svelte.d.ts → date-picker-day.svelte.d.ts} +7 -7
- package/dist/bits/date-picker/index.d.ts +1 -1
- package/dist/bits/date-picker/index.js +1 -1
- package/dist/bits/date-picker/types.d.ts +2 -2
- package/dist/bits/date-range-picker/_export.types.d.ts +1 -1
- package/dist/bits/date-range-picker/components/{date-range-picker-date.svelte → date-range-picker-day.svelte} +1 -1
- package/dist/bits/date-range-picker/components/{date-range-picker-date.svelte.d.ts → date-range-picker-day.svelte.d.ts} +6 -6
- package/dist/bits/date-range-picker/components/date-range-picker.svelte +6 -2
- package/dist/bits/date-range-picker/components/date-range-picker.svelte.d.ts +2 -0
- package/dist/bits/date-range-picker/ctx.d.ts +4 -0
- package/dist/bits/date-range-picker/index.d.ts +1 -1
- package/dist/bits/date-range-picker/index.js +1 -1
- package/dist/bits/date-range-picker/types.d.ts +2 -2
- package/dist/bits/radio-group/ctx.d.ts +1 -1
- package/dist/bits/range-calendar/_export.types.d.ts +1 -1
- package/dist/bits/range-calendar/_types.d.ts +35 -6
- package/dist/bits/range-calendar/components/{range-calendar-date.svelte → range-calendar-day.svelte} +1 -1
- package/dist/bits/range-calendar/components/{range-calendar-date.svelte.d.ts → range-calendar-day.svelte.d.ts} +7 -7
- package/dist/bits/range-calendar/components/range-calendar.svelte +21 -3
- package/dist/bits/range-calendar/components/range-calendar.svelte.d.ts +2 -0
- package/dist/bits/range-calendar/ctx.d.ts +5 -1
- package/dist/bits/range-calendar/ctx.js +1 -1
- package/dist/bits/range-calendar/index.d.ts +1 -1
- package/dist/bits/range-calendar/index.js +1 -1
- package/dist/bits/range-calendar/types.d.ts +3 -3
- package/dist/bits/select/components/select-trigger.svelte.d.ts +1 -1
- package/dist/bits/select/ctx.d.ts +2 -2
- package/dist/bits/slider/ctx.d.ts +1 -1
- package/dist/bits/switch/ctx.d.ts +1 -1
- package/dist/bits/toggle/ctx.d.ts +1 -1
- package/dist/internal/focus.d.ts +6 -0
- package/dist/internal/focus.js +26 -0
- package/dist/internal/index.d.ts +1 -0
- package/dist/internal/index.js +1 -0
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type Accordion as AccordionReturn, type CreateAccordionProps } from "@melt-ui/svelte";
|
|
3
3
|
import type { ItemProps } from "./types.js";
|
|
4
|
-
export declare const getAttrs: (part: "content" | "
|
|
4
|
+
export declare const getAttrs: (part: "content" | "header" | "root" | "item" | "trigger") => Record<string, string>;
|
|
5
5
|
type GetReturn = AccordionReturn;
|
|
6
6
|
export declare function setCtx<Multiple extends boolean>(props: CreateAccordionProps<Multiple>): {
|
|
7
7
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateAvatarProps, type Avatar as AvatarReturn } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "image" | "root" | "fallback") => Record<string, string>;
|
|
4
4
|
export declare function setCtx(props: CreateAvatarProps): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { Props as CalendarProps, PrevButtonProps as CalendarPrevButtonProps, NextButtonProps as CalendarNextButtonProps, HeadingProps as CalendarHeadingProps, GridProps as CalendarGridProps, CellProps as CalendarCellProps, GridRowProps as CalendarGridRowProps, GridBodyProps as CalendarGridBodyProps, HeadCellProps as CalendarHeadCellProps, GridHeadProps as CalendarGridHeadProps, HeaderProps as CalendarHeaderProps,
|
|
1
|
+
export type { Props as CalendarProps, PrevButtonProps as CalendarPrevButtonProps, NextButtonProps as CalendarNextButtonProps, HeadingProps as CalendarHeadingProps, GridProps as CalendarGridProps, CellProps as CalendarCellProps, GridRowProps as CalendarGridRowProps, GridBodyProps as CalendarGridBodyProps, HeadCellProps as CalendarHeadCellProps, GridHeadProps as CalendarGridHeadProps, HeaderProps as CalendarHeaderProps, DayProps as CalendarDayProps, Events as CalendarEvents, PrevButtonEvents as CalendarPrevButtonEvents, NextButtonEvents as CalendarNextButtonEvents, DayEvents as CalendarDayEvents } from "./types.js";
|
|
@@ -33,6 +33,14 @@ type Props<Multiple extends boolean = false> = Expand<OmitCalendarProps<CreateCa
|
|
|
33
33
|
* A callback function called when the placeholder changes.
|
|
34
34
|
*/
|
|
35
35
|
onPlaceholderChange?: OnChangeFn<DateValue>;
|
|
36
|
+
/**
|
|
37
|
+
* If `true`, the calendar will focus the selected day,
|
|
38
|
+
* today, or the first day of the month in that order depending
|
|
39
|
+
* on what is visible when the calendar is mounted.
|
|
40
|
+
*
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
initialFocus?: boolean;
|
|
36
44
|
} & AsChild>;
|
|
37
45
|
type PrevButtonProps = AsChild;
|
|
38
46
|
type NextButtonProps = AsChild;
|
|
@@ -43,7 +51,7 @@ type HeadCellProps = AsChild;
|
|
|
43
51
|
type GridProps = AsChild;
|
|
44
52
|
type GridBodyProps = AsChild;
|
|
45
53
|
type GridRowProps = AsChild;
|
|
46
|
-
type
|
|
54
|
+
type BaseDayProps = Expand<{
|
|
47
55
|
/**
|
|
48
56
|
* The date value of the cell.
|
|
49
57
|
*/
|
|
@@ -53,6 +61,6 @@ type BaseDateProps = Expand<{
|
|
|
53
61
|
*/
|
|
54
62
|
month: DateValue;
|
|
55
63
|
} & AsChild>;
|
|
56
|
-
type CellProps = Expand<Omit<
|
|
57
|
-
type
|
|
58
|
-
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps,
|
|
64
|
+
type CellProps = Expand<Omit<BaseDayProps, "month">>;
|
|
65
|
+
type DayProps = Expand<BaseDayProps>;
|
|
66
|
+
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DayProps };
|
|
@@ -8,12 +8,12 @@ const {
|
|
|
8
8
|
elements: { cell },
|
|
9
9
|
helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
|
|
10
10
|
} = getCtx();
|
|
11
|
-
const attrs = getAttrs("
|
|
11
|
+
const attrs = getAttrs("day");
|
|
12
|
+
const dispatch = createDispatcher();
|
|
12
13
|
$:
|
|
13
14
|
builder = $cell(date, month);
|
|
14
15
|
$:
|
|
15
16
|
Object.assign(builder, attrs);
|
|
16
|
-
const dispatch = createDispatcher();
|
|
17
17
|
$:
|
|
18
18
|
slotProps = {
|
|
19
19
|
builder,
|
package/dist/bits/calendar/components/{calendar-date.svelte.d.ts → calendar-day.svelte.d.ts}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type {
|
|
2
|
+
import type { DayEvents, DayProps } from "../types.js";
|
|
3
3
|
declare const __propDef: {
|
|
4
|
-
props:
|
|
4
|
+
props: DayProps;
|
|
5
5
|
slots: {
|
|
6
6
|
default: {
|
|
7
7
|
builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
|
|
@@ -28,11 +28,11 @@ declare const __propDef: {
|
|
|
28
28
|
selected: boolean;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
|
-
events:
|
|
31
|
+
events: DayEvents;
|
|
32
32
|
};
|
|
33
|
-
export type
|
|
34
|
-
export type
|
|
35
|
-
export type
|
|
36
|
-
export default class
|
|
33
|
+
export type CalendarDayProps = typeof __propDef.props;
|
|
34
|
+
export type CalendarDayEvents = typeof __propDef.events;
|
|
35
|
+
export type CalendarDaySlots = typeof __propDef.slots;
|
|
36
|
+
export default class CalendarDay extends SvelteComponent<CalendarDayProps, CalendarDayEvents, CalendarDaySlots> {
|
|
37
37
|
}
|
|
38
38
|
export {};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
<script>import {
|
|
1
|
+
<script>import { handleCalendarInitialFocus } from "../../../internal/focus.js";
|
|
2
|
+
import { createDispatcher } from "../../../internal/events.js";
|
|
2
3
|
import { melt } from "@melt-ui/svelte";
|
|
4
|
+
import { onMount } from "svelte";
|
|
3
5
|
import { setCtx, getAttrs } from "../ctx.js";
|
|
4
6
|
export let placeholder = void 0;
|
|
5
7
|
export let onPlaceholderChange = void 0;
|
|
@@ -22,6 +24,13 @@ export let multiple = false;
|
|
|
22
24
|
export let asChild = false;
|
|
23
25
|
export let id = void 0;
|
|
24
26
|
export let numberOfMonths = void 0;
|
|
27
|
+
export let initialFocus = false;
|
|
28
|
+
let el = void 0;
|
|
29
|
+
onMount(() => {
|
|
30
|
+
if (!initialFocus || !el)
|
|
31
|
+
return;
|
|
32
|
+
handleCalendarInitialFocus(el);
|
|
33
|
+
});
|
|
25
34
|
const {
|
|
26
35
|
elements: { calendar },
|
|
27
36
|
states: {
|
|
@@ -118,7 +127,12 @@ $:
|
|
|
118
127
|
{#if asChild}
|
|
119
128
|
<slot {...slotProps} />
|
|
120
129
|
{:else}
|
|
121
|
-
<div
|
|
130
|
+
<div
|
|
131
|
+
{...builder} use:builder.action
|
|
132
|
+
{...$$restProps}
|
|
133
|
+
on:m-keydown={dispatch}
|
|
134
|
+
bind:this={el}
|
|
135
|
+
>
|
|
122
136
|
<slot {...slotProps} />
|
|
123
137
|
</div>
|
|
124
138
|
{/if}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateCalendarProps } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
|
|
4
4
|
export declare function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Root } from "./components/calendar.svelte";
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as Day } from "./components/calendar-day.svelte";
|
|
3
3
|
export { default as Grid } from "./components/calendar-grid.svelte";
|
|
4
4
|
export { default as GridBody } from "./components/calendar-grid-body.svelte";
|
|
5
5
|
export { default as Cell } from "./components/calendar-cell.svelte";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Root } from "./components/calendar.svelte";
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as Day } from "./components/calendar-day.svelte";
|
|
3
3
|
export { default as Grid } from "./components/calendar-grid.svelte";
|
|
4
4
|
export { default as GridBody } from "./components/calendar-grid-body.svelte";
|
|
5
5
|
export { default as Cell } from "./components/calendar-cell.svelte";
|
|
@@ -13,7 +13,7 @@ type HeadCellProps = I.HeadCellProps & HTMLThAttributes;
|
|
|
13
13
|
type GridBodyProps = I.GridBodyProps & HTMLAttributes<HTMLTableSectionElement>;
|
|
14
14
|
type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
|
|
15
15
|
type CellProps = I.CellProps & HTMLTdAttributes;
|
|
16
|
-
type
|
|
16
|
+
type DayProps = I.DayProps & HTMLDivAttributes;
|
|
17
17
|
/**
|
|
18
18
|
* Events
|
|
19
19
|
*/
|
|
@@ -22,10 +22,10 @@ type ButtonEvents = {
|
|
|
22
22
|
};
|
|
23
23
|
type PrevButtonEvents = ButtonEvents;
|
|
24
24
|
type NextButtonEvents = ButtonEvents;
|
|
25
|
-
type
|
|
25
|
+
type DayEvents = {
|
|
26
26
|
click: CustomEventHandler<MouseEvent, HTMLDivElement>;
|
|
27
27
|
};
|
|
28
28
|
type Events = {
|
|
29
29
|
keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
|
|
30
30
|
};
|
|
31
|
-
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps,
|
|
31
|
+
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps, DayProps, Events, PrevButtonEvents, NextButtonEvents, DayEvents };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type Checkbox as CheckboxReturn, type CreateCheckboxProps } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "input" | "root" | "indicator") => Record<string, string>;
|
|
4
4
|
export declare function setCtx(props: CreateCheckboxProps): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { Props as DatePickerProps, CalendarProps as DatePickerCalendarProps, LabelProps as DatePickerLabelProps, DescriptionProps as DatePickerDescriptionProps, InputProps as DatePickerInputProps, SegmentProps as DatePickerSegmentProps, CellProps as DatePickerCellProps,
|
|
1
|
+
export type { Props as DatePickerProps, CalendarProps as DatePickerCalendarProps, LabelProps as DatePickerLabelProps, DescriptionProps as DatePickerDescriptionProps, InputProps as DatePickerInputProps, SegmentProps as DatePickerSegmentProps, CellProps as DatePickerCellProps, DayProps as DatePickerDayProps, GridBodyProps as DatePickerGridBodyProps, GridHeadProps as DatePickerGridHeadProps, GridRowProps as DatePickerGridRowProps, GridProps as DatePickerGridProps, HeadCellProps as DatePickerHeadCellProps, HeaderProps as DatePickerHeaderProps, HeadingProps as DatePickerHeadingProps, NextButtonProps as DatePickerNextButtonProps, PrevButtonProps as DatePickerPrevButtonProps, TriggerProps as DatePickerTriggerProps, ContentProps as DatePickerContentProps, ArrowProps as DatePickerArrowProps, CloseProps as DatePickerCloseProps, CloseEvents as DatePickerCloseEvents, TriggerEvents as DatePickerTriggerEvents, CalendarEvents as DatePickerCalendarEvents, DayEvents as DatePickerDayEvents, PrevButtonEvents as DatePickerPrevButtonEvents, NextButtonEvents as DatePickerNextButtonEvents, SegmentEvents as DatePickerSegmentEvents } from "./types.js";
|
|
@@ -8,7 +8,7 @@ const {
|
|
|
8
8
|
elements: { cell },
|
|
9
9
|
helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
|
|
10
10
|
} = getCtx();
|
|
11
|
-
const attrs = getCalendarAttrs("
|
|
11
|
+
const attrs = getCalendarAttrs("day");
|
|
12
12
|
const dispatch = createDispatcher();
|
|
13
13
|
$:
|
|
14
14
|
builder = $cell(date, month);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type {
|
|
2
|
+
import type { DayEvents, DayProps } from "../types.js";
|
|
3
3
|
declare const __propDef: {
|
|
4
|
-
props:
|
|
4
|
+
props: DayProps;
|
|
5
5
|
slots: {
|
|
6
6
|
default: {
|
|
7
7
|
builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
|
|
@@ -28,11 +28,11 @@ declare const __propDef: {
|
|
|
28
28
|
selected: boolean;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
|
-
events:
|
|
31
|
+
events: DayEvents;
|
|
32
32
|
};
|
|
33
|
-
export type
|
|
34
|
-
export type
|
|
35
|
-
export type
|
|
36
|
-
export default class
|
|
33
|
+
export type DatePickerDayProps = typeof __propDef.props;
|
|
34
|
+
export type DatePickerDayEvents = typeof __propDef.events;
|
|
35
|
+
export type DatePickerDaySlots = typeof __propDef.slots;
|
|
36
|
+
export default class DatePickerDay extends SvelteComponent<DatePickerDayProps, DatePickerDayEvents, DatePickerDaySlots> {
|
|
37
37
|
}
|
|
38
38
|
export {};
|
|
@@ -14,7 +14,7 @@ export { default as GridRow } from "../calendar/components/calendar-grid-row.sve
|
|
|
14
14
|
export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
|
|
15
15
|
export { default as Header } from "../calendar/components/calendar-header.svelte";
|
|
16
16
|
export { default as Cell } from "./components/date-picker-cell.svelte";
|
|
17
|
-
export { default as
|
|
17
|
+
export { default as Day } from "./components/date-picker-day.svelte";
|
|
18
18
|
export { default as Grid } from "./components/date-picker-grid.svelte";
|
|
19
19
|
export { default as Heading } from "./components/date-picker-heading.svelte";
|
|
20
20
|
export { default as NextButton } from "./components/date-picker-next-button.svelte";
|
|
@@ -14,7 +14,7 @@ export { default as GridRow } from "../calendar/components/calendar-grid-row.sve
|
|
|
14
14
|
export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
|
|
15
15
|
export { default as Header } from "../calendar/components/calendar-header.svelte";
|
|
16
16
|
export { default as Cell } from "./components/date-picker-cell.svelte";
|
|
17
|
-
export { default as
|
|
17
|
+
export { default as Day } from "./components/date-picker-day.svelte";
|
|
18
18
|
export { default as Grid } from "./components/date-picker-grid.svelte";
|
|
19
19
|
export { default as Heading } from "./components/date-picker-heading.svelte";
|
|
20
20
|
export { default as NextButton } from "./components/date-picker-next-button.svelte";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLDivAttributes, HTMLSpanAttributes } from "../../internal/index.js";
|
|
2
2
|
import type * as I from "./_types.js";
|
|
3
|
-
import type { CellProps,
|
|
3
|
+
import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, Events as CalendarEvents, DayEvents, PrevButtonEvents, NextButtonEvents } from "../calendar/types.js";
|
|
4
4
|
import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
|
|
5
5
|
import type { SegmentEvents } from "../date-field/types.js";
|
|
6
6
|
type Props = I.Props;
|
|
@@ -9,4 +9,4 @@ type SegmentProps = I.SegmentProps & HTMLDivAttributes;
|
|
|
9
9
|
type InputProps = I.InputProps & HTMLDivAttributes;
|
|
10
10
|
type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
|
|
11
11
|
type CalendarProps = I.CalendarProps & HTMLDivAttributes;
|
|
12
|
-
export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps,
|
|
12
|
+
export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, CalendarEvents, DayEvents, PrevButtonEvents, NextButtonEvents, SegmentEvents };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { Props as DateRangePickerProps, CalendarProps as DateRangePickerCalendarProps, LabelProps as DateRangePickerLabelProps, DescriptionProps as DateRangePickerDescriptionProps, InputProps as DateRangePickerInputProps, SegmentProps as DateRangePickerSegmentProps, CellProps as DateRangePickerCellProps,
|
|
1
|
+
export type { Props as DateRangePickerProps, CalendarProps as DateRangePickerCalendarProps, LabelProps as DateRangePickerLabelProps, DescriptionProps as DateRangePickerDescriptionProps, InputProps as DateRangePickerInputProps, SegmentProps as DateRangePickerSegmentProps, CellProps as DateRangePickerCellProps, DayProps as DateRangePickerDayProps, GridBodyProps as DateRangePickerGridBodyProps, GridHeadProps as DateRangePickerGridHeadProps, GridRowProps as DateRangePickerGridRowProps, GridProps as DateRangePickerGridProps, HeadCellProps as DateRangePickerHeadCellProps, HeaderProps as DateRangePickerHeaderProps, HeadingProps as DateRangePickerHeadingProps, NextButtonProps as DateRangePickerNextButtonProps, PrevButtonProps as DateRangePickerPrevButtonProps, TriggerProps as DateRangePickerTriggerProps, ContentProps as DateRangePickerContentProps, ArrowProps as DateRangePickerArrowProps, CloseProps as DateRangePickerCloseProps, CloseEvents as DateRangePickerCloseEvents, TriggerEvents as DateRangePickerTriggerEvents, CalendarEvents as DateRangePickerCalendarEvents, DayEvents as DateRangePickerDayEvents, PrevButtonEvents as DateRangePickerPrevButtonEvents, NextButtonEvents as DateRangePickerNextButtonEvents, SegmentEvents as DateRangePickerSegmentEvents } from "./types.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type {
|
|
2
|
+
import type { DayProps } from "../types.js";
|
|
3
3
|
declare const __propDef: {
|
|
4
|
-
props:
|
|
4
|
+
props: DayProps;
|
|
5
5
|
events: {
|
|
6
6
|
[evt: string]: CustomEvent<any>;
|
|
7
7
|
};
|
|
@@ -34,9 +34,9 @@ declare const __propDef: {
|
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
|
-
export type
|
|
38
|
-
export type
|
|
39
|
-
export type
|
|
40
|
-
export default class
|
|
37
|
+
export type DateRangePickerDayProps = typeof __propDef.props;
|
|
38
|
+
export type DateRangePickerDayEvents = typeof __propDef.events;
|
|
39
|
+
export type DateRangePickerDaySlots = typeof __propDef.slots;
|
|
40
|
+
export default class DateRangePickerDay extends SvelteComponent<DateRangePickerDayProps, DateRangePickerDayEvents, DateRangePickerDaySlots> {
|
|
41
41
|
}
|
|
42
42
|
export {};
|
|
@@ -26,7 +26,9 @@ const {
|
|
|
26
26
|
states: {
|
|
27
27
|
value: localValue,
|
|
28
28
|
placeholder: localPlaceholder,
|
|
29
|
-
isInvalid: localIsInvalid
|
|
29
|
+
isInvalid: localIsInvalid,
|
|
30
|
+
startValue,
|
|
31
|
+
endValue
|
|
30
32
|
},
|
|
31
33
|
updateOption,
|
|
32
34
|
ids
|
|
@@ -209,7 +211,9 @@ $:
|
|
|
209
211
|
$:
|
|
210
212
|
slotProps = {
|
|
211
213
|
isInvalid: $localIsInvalid,
|
|
212
|
-
ids: $idValues
|
|
214
|
+
ids: $idValues,
|
|
215
|
+
startValue: $startValue,
|
|
216
|
+
endValue: $endValue
|
|
213
217
|
};
|
|
214
218
|
</script>
|
|
215
219
|
|
|
@@ -340,6 +340,8 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
|
|
|
340
340
|
months: Writable<import("@melt-ui/svelte").Month<import("@internationalized/date").DateValue>[]>;
|
|
341
341
|
weekdays: import("svelte/store").Readable<string[]>;
|
|
342
342
|
headingValue: import("svelte/store").Readable<string>;
|
|
343
|
+
startValue: Writable<import("@internationalized/date").DateValue | undefined>;
|
|
344
|
+
endValue: Writable<import("@internationalized/date").DateValue | undefined>;
|
|
343
345
|
segmentContents: import("svelte/store").Readable<{
|
|
344
346
|
start: {
|
|
345
347
|
part: import("@melt-ui/svelte").SegmentPart;
|
|
@@ -837,6 +839,8 @@ export declare function getCtx(): {
|
|
|
837
839
|
months: Writable<import("@melt-ui/svelte").Month<import("@internationalized/date").DateValue>[]>;
|
|
838
840
|
weekdays: import("svelte/store").Readable<string[]>;
|
|
839
841
|
headingValue: import("svelte/store").Readable<string>;
|
|
842
|
+
startValue: Writable<import("@internationalized/date").DateValue | undefined>;
|
|
843
|
+
endValue: Writable<import("@internationalized/date").DateValue | undefined>;
|
|
840
844
|
segmentContents: import("svelte/store").Readable<{
|
|
841
845
|
start: {
|
|
842
846
|
part: import("@melt-ui/svelte").SegmentPart;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as Arrow } from "./components/date-range-picker-arrow.svelte";
|
|
2
2
|
export { default as Cell } from "./components/date-range-picker-cell.svelte";
|
|
3
|
-
export { default as
|
|
3
|
+
export { default as Day } from "./components/date-range-picker-day.svelte";
|
|
4
4
|
export { default as Heading } from "./components/date-range-picker-heading.svelte";
|
|
5
5
|
export { default as NextButton } from "./components/date-range-picker-next-button.svelte";
|
|
6
6
|
export { default as PrevButton } from "./components/date-range-picker-prev-button.svelte";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as Arrow } from "./components/date-range-picker-arrow.svelte";
|
|
2
2
|
export { default as Cell } from "./components/date-range-picker-cell.svelte";
|
|
3
|
-
export { default as
|
|
3
|
+
export { default as Day } from "./components/date-range-picker-day.svelte";
|
|
4
4
|
export { default as Heading } from "./components/date-range-picker-heading.svelte";
|
|
5
5
|
export { default as NextButton } from "./components/date-range-picker-next-button.svelte";
|
|
6
6
|
export { default as PrevButton } from "./components/date-range-picker-prev-button.svelte";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLDivAttributes, HTMLSpanAttributes } from "../../internal/index.js";
|
|
2
2
|
import type * as I from "./_types.js";
|
|
3
|
-
import type { CellProps,
|
|
3
|
+
import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, NextButtonEvents, PrevButtonEvents, DayEvents, Events as CalendarEvents } from "../range-calendar/types.js";
|
|
4
4
|
import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
|
|
5
5
|
import type { SegmentEvents } from "../date-range-field/types.js";
|
|
6
6
|
type Props = I.Props;
|
|
@@ -9,4 +9,4 @@ type SegmentProps = I.SegmentProps & HTMLDivAttributes;
|
|
|
9
9
|
type InputProps = I.InputProps & HTMLDivAttributes;
|
|
10
10
|
type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
|
|
11
11
|
type CalendarProps = I.CalendarProps & HTMLDivAttributes;
|
|
12
|
-
export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps,
|
|
12
|
+
export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, NextButtonEvents, PrevButtonEvents, DayEvents, CalendarEvents, SegmentEvents };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateRadioGroupProps, type RadioGroup as RadioGroupReturn } from "@melt-ui/svelte";
|
|
3
3
|
import type { Readable } from "svelte/store";
|
|
4
|
-
export declare const getAttrs: (part: "
|
|
4
|
+
export declare const getAttrs: (part: "input" | "root" | "item" | "item-indicator") => Record<string, string>;
|
|
5
5
|
export declare function setCtx(props: CreateRadioGroupProps): {
|
|
6
6
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
7
7
|
elements: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { Props as RangeCalendarProps, PrevButtonProps as RangeCalendarPrevButtonProps, NextButtonProps as RangeCalendarNextButtonProps, HeadingProps as RangeCalendarHeadingProps, HeaderProps as RangeCalendarHeaderProps, GridProps as RangeCalendarGridProps, GridHeadProps as RangeCalendarGridHeadProps, HeadCellProps as RangeCalendarHeadCellProps, GridBodyProps as RangeCalendarGridBodyProps, CellProps as RangeCalendarCellProps, GridRowProps as RangeCalendarGridRowProps,
|
|
1
|
+
export type { Props as RangeCalendarProps, PrevButtonProps as RangeCalendarPrevButtonProps, NextButtonProps as RangeCalendarNextButtonProps, HeadingProps as RangeCalendarHeadingProps, HeaderProps as RangeCalendarHeaderProps, GridProps as RangeCalendarGridProps, GridHeadProps as RangeCalendarGridHeadProps, HeadCellProps as RangeCalendarHeadCellProps, GridBodyProps as RangeCalendarGridBodyProps, CellProps as RangeCalendarCellProps, GridRowProps as RangeCalendarGridRowProps, DayProps as RangeCalendarDayProps, Events as RangeCalendarEvents, PrevButtonEvents as RangeCalendarPrevButtonEvents, NextButtonEvents as RangeCalendarNextButtonEvents, DayEvents as RangeCalendarDayEvents } from "./types.js";
|
|
@@ -8,10 +8,39 @@ import type { DateRange } from "../../shared/index.js";
|
|
|
8
8
|
import type { DateValue } from "@internationalized/date";
|
|
9
9
|
import type { CreateRangeCalendarProps } from "@melt-ui/svelte";
|
|
10
10
|
type Props = Expand<Omit<CreateRangeCalendarProps, "placeholder" | "defaultPlaceholder" | "value" | "defaultValue" | "onPlaceholderChange" | "onValueChange" | "ids"> & {
|
|
11
|
-
|
|
11
|
+
/**
|
|
12
|
+
* The selected date range. This updates as the user selects
|
|
13
|
+
* date ranges in the calendar.
|
|
14
|
+
*
|
|
15
|
+
* You can bind this to a value to programmatically control the
|
|
16
|
+
* value state.
|
|
17
|
+
*/
|
|
12
18
|
value?: DateRange;
|
|
13
|
-
|
|
19
|
+
/**
|
|
20
|
+
* A callback function called when the value changes.
|
|
21
|
+
*/
|
|
14
22
|
onValueChange?: OnChangeFn<DateRange>;
|
|
23
|
+
/**
|
|
24
|
+
* The placeholder date, used to display the calendar when no
|
|
25
|
+
* date is selected. This updates as the user navigates
|
|
26
|
+
* the calendar.
|
|
27
|
+
*
|
|
28
|
+
* You can bind this to a value to programmatically control the
|
|
29
|
+
* placeholder state.
|
|
30
|
+
*/
|
|
31
|
+
placeholder?: DateValue;
|
|
32
|
+
/**
|
|
33
|
+
* A callback function called when the placeholder changes.
|
|
34
|
+
*/
|
|
35
|
+
onPlaceholderChange?: OnChangeFn<DateValue>;
|
|
36
|
+
/**
|
|
37
|
+
* If `true`, the calendar will focus the selected day,
|
|
38
|
+
* today, or the first day of the month in that order depending
|
|
39
|
+
* on what is visible when the calendar is mounted.
|
|
40
|
+
*
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
initialFocus?: boolean;
|
|
15
44
|
} & AsChild>;
|
|
16
45
|
type PrevButtonProps = AsChild;
|
|
17
46
|
type NextButtonProps = AsChild;
|
|
@@ -22,7 +51,7 @@ type HeadCellProps = AsChild;
|
|
|
22
51
|
type GridProps = AsChild;
|
|
23
52
|
type GridBodyProps = AsChild;
|
|
24
53
|
type GridRowProps = AsChild;
|
|
25
|
-
type
|
|
54
|
+
type BaseDayProps = Expand<{
|
|
26
55
|
/**
|
|
27
56
|
* The date value of the cell.
|
|
28
57
|
*/
|
|
@@ -32,6 +61,6 @@ type BaseDateProps = Expand<{
|
|
|
32
61
|
*/
|
|
33
62
|
month: DateValue;
|
|
34
63
|
} & AsChild>;
|
|
35
|
-
type CellProps = Expand<Omit<
|
|
36
|
-
type
|
|
37
|
-
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps,
|
|
64
|
+
type CellProps = Expand<Omit<BaseDayProps, "month">>;
|
|
65
|
+
type DayProps = Expand<BaseDayProps>;
|
|
66
|
+
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DayProps };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type {
|
|
2
|
+
import type { DayEvents, DayProps } from "../types.js";
|
|
3
3
|
declare const __propDef: {
|
|
4
|
-
props:
|
|
4
|
+
props: DayProps;
|
|
5
5
|
slots: {
|
|
6
6
|
default: {
|
|
7
7
|
builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
|
|
@@ -30,11 +30,11 @@ declare const __propDef: {
|
|
|
30
30
|
unavailable: boolean;
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
|
-
events:
|
|
33
|
+
events: DayEvents;
|
|
34
34
|
};
|
|
35
|
-
export type
|
|
36
|
-
export type
|
|
37
|
-
export type
|
|
38
|
-
export default class
|
|
35
|
+
export type RangeCalendarDayProps = typeof __propDef.props;
|
|
36
|
+
export type RangeCalendarDayEvents = typeof __propDef.events;
|
|
37
|
+
export type RangeCalendarDaySlots = typeof __propDef.slots;
|
|
38
|
+
export default class RangeCalendarDay extends SvelteComponent<RangeCalendarDayProps, RangeCalendarDayEvents, RangeCalendarDaySlots> {
|
|
39
39
|
}
|
|
40
40
|
export {};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script>import { melt } from "@melt-ui/svelte";
|
|
2
2
|
import { setCtx, getAttrs } from "../ctx.js";
|
|
3
3
|
import { createDispatcher } from "../../../internal/events.js";
|
|
4
|
+
import { onMount } from "svelte";
|
|
5
|
+
import { handleCalendarInitialFocus } from "../../../internal/focus.js";
|
|
4
6
|
export let placeholder = void 0;
|
|
5
7
|
export let onPlaceholderChange = void 0;
|
|
6
8
|
export let value = void 0;
|
|
@@ -20,13 +22,22 @@ export let calendarLabel = void 0;
|
|
|
20
22
|
export let asChild = false;
|
|
21
23
|
export let id = void 0;
|
|
22
24
|
export let weekdayFormat = void 0;
|
|
25
|
+
export let initialFocus = false;
|
|
26
|
+
let el = void 0;
|
|
27
|
+
onMount(() => {
|
|
28
|
+
if (!initialFocus || !el)
|
|
29
|
+
return;
|
|
30
|
+
handleCalendarInitialFocus(el);
|
|
31
|
+
});
|
|
23
32
|
const {
|
|
24
33
|
elements: { calendar },
|
|
25
34
|
states: {
|
|
26
35
|
value: localValue,
|
|
27
36
|
placeholder: localPlaceholder,
|
|
28
37
|
months,
|
|
29
|
-
weekdays
|
|
38
|
+
weekdays,
|
|
39
|
+
startValue,
|
|
40
|
+
endValue
|
|
30
41
|
},
|
|
31
42
|
updateOption,
|
|
32
43
|
ids
|
|
@@ -105,14 +116,21 @@ $:
|
|
|
105
116
|
slotProps = {
|
|
106
117
|
builder,
|
|
107
118
|
months: $months,
|
|
108
|
-
weekdays: $weekdays
|
|
119
|
+
weekdays: $weekdays,
|
|
120
|
+
startValue: $startValue,
|
|
121
|
+
endValue: $endValue
|
|
109
122
|
};
|
|
110
123
|
</script>
|
|
111
124
|
|
|
112
125
|
{#if asChild}
|
|
113
126
|
<slot {...slotProps} />
|
|
114
127
|
{:else}
|
|
115
|
-
<div
|
|
128
|
+
<div
|
|
129
|
+
{...builder} use:builder.action
|
|
130
|
+
{...$$restProps}
|
|
131
|
+
on:m-keydown={dispatch}
|
|
132
|
+
bind:this={el}
|
|
133
|
+
>
|
|
116
134
|
<slot {...slotProps} />
|
|
117
135
|
</div>
|
|
118
136
|
{/if}
|
|
@@ -18,6 +18,8 @@ declare const __propDef: {
|
|
|
18
18
|
};
|
|
19
19
|
months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
|
|
20
20
|
weekdays: string[];
|
|
21
|
+
startValue: import("@internationalized/date").DateValue | undefined;
|
|
22
|
+
endValue: import("@internationalized/date").DateValue | undefined;
|
|
21
23
|
};
|
|
22
24
|
};
|
|
23
25
|
events: Events;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateRangeCalendarProps } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
|
|
4
4
|
export declare function setCtx(props: CreateRangeCalendarProps): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -92,6 +92,8 @@ export declare function setCtx(props: CreateRangeCalendarProps): {
|
|
|
92
92
|
set: (this: void, value: import("@melt-ui/svelte").DateRange) => void;
|
|
93
93
|
subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").DateRange>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").DateRange> | undefined): import("svelte/store").Unsubscriber;
|
|
94
94
|
};
|
|
95
|
+
startValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
|
|
96
|
+
endValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
|
|
95
97
|
};
|
|
96
98
|
helpers: {
|
|
97
99
|
nextPage: () => void;
|
|
@@ -222,6 +224,8 @@ export declare function getCtx(): {
|
|
|
222
224
|
set: (this: void, value: import("@melt-ui/svelte").DateRange) => void;
|
|
223
225
|
subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").DateRange>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").DateRange> | undefined): import("svelte/store").Unsubscriber;
|
|
224
226
|
};
|
|
227
|
+
startValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
|
|
228
|
+
endValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
|
|
225
229
|
};
|
|
226
230
|
helpers: {
|
|
227
231
|
nextPage: () => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Root } from "./components/range-calendar.svelte";
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as Day } from "./components/range-calendar-day.svelte";
|
|
3
3
|
export { default as Grid } from "./components/range-calendar-grid.svelte";
|
|
4
4
|
export { default as GridBody } from "./components/range-calendar-grid-body.svelte";
|
|
5
5
|
export { default as Cell } from "./components/range-calendar-cell.svelte";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Root } from "./components/range-calendar.svelte";
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as Day } from "./components/range-calendar-day.svelte";
|
|
3
3
|
export { default as Grid } from "./components/range-calendar-grid.svelte";
|
|
4
4
|
export { default as GridBody } from "./components/range-calendar-grid-body.svelte";
|
|
5
5
|
export { default as Cell } from "./components/range-calendar-cell.svelte";
|
|
@@ -13,7 +13,7 @@ type HeadCellProps = I.HeadCellProps & HTMLThAttributes;
|
|
|
13
13
|
type GridBodyProps = I.GridBodyProps & HTMLAttributes<HTMLTableSectionElement>;
|
|
14
14
|
type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
|
|
15
15
|
type CellProps = I.CellProps & HTMLTdAttributes;
|
|
16
|
-
type
|
|
16
|
+
type DayProps = I.DayProps & HTMLDivAttributes;
|
|
17
17
|
/**
|
|
18
18
|
* Events
|
|
19
19
|
*/
|
|
@@ -22,7 +22,7 @@ type ButtonEvents = {
|
|
|
22
22
|
};
|
|
23
23
|
type PrevButtonEvents = ButtonEvents;
|
|
24
24
|
type NextButtonEvents = ButtonEvents;
|
|
25
|
-
type
|
|
25
|
+
type DayEvents = {
|
|
26
26
|
click: CustomEventHandler<MouseEvent, HTMLDivElement>;
|
|
27
27
|
focusin: CustomEventHandler<FocusEvent, HTMLDivElement>;
|
|
28
28
|
mouseenter: CustomEventHandler<MouseEvent, HTMLDivElement>;
|
|
@@ -30,4 +30,4 @@ type DateEvents = {
|
|
|
30
30
|
type Events = {
|
|
31
31
|
keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
|
|
32
32
|
};
|
|
33
|
-
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps,
|
|
33
|
+
export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps, DayProps, Events, PrevButtonEvents, NextButtonEvents, DayEvents };
|
|
@@ -16,7 +16,7 @@ declare const __propDef: {
|
|
|
16
16
|
} & {
|
|
17
17
|
[x: `data-melt-${string}`]: "";
|
|
18
18
|
} & {
|
|
19
|
-
action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"
|
|
19
|
+
action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "click">;
|
|
20
20
|
};
|
|
21
21
|
};
|
|
22
22
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { type CreateSelectProps, type Select as SelectReturn } from "@melt-ui/svelte";
|
|
3
3
|
import type { Writable } from "svelte/store";
|
|
4
4
|
import type { FloatingProps } from "../floating/_types.js";
|
|
5
|
-
export declare const getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "
|
|
5
|
+
export declare const getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
|
|
6
6
|
type GetReturn = SelectReturn;
|
|
7
7
|
export declare function getCtx(): GetReturn;
|
|
8
8
|
type Items<T> = {
|
|
@@ -26,7 +26,7 @@ export declare function setCtx<T = unknown, M extends boolean = false>(props: Pr
|
|
|
26
26
|
update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
|
|
27
27
|
set: (this: void, value: boolean) => void;
|
|
28
28
|
subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
|
|
29
|
-
}, Writable<HTMLElement | null>, Writable<boolean>, Writable<string>, Writable<string>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"
|
|
29
|
+
}, Writable<HTMLElement | null>, Writable<boolean>, Writable<string>, Writable<string>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "click">, ([$open, $highlightedItem, $disabled, $menuId, $triggerId, $labelId]: [boolean, HTMLElement | null, boolean, string, string, string]) => {
|
|
30
30
|
readonly 'aria-activedescendant': string | undefined;
|
|
31
31
|
readonly 'aria-autocomplete': "list";
|
|
32
32
|
readonly 'aria-controls': string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateSliderProps, type Slider as SliderReturn } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "input" | "root" | "range" | "thumb" | "tick") => Record<string, string>;
|
|
4
4
|
export declare function setCtx(props: CreateSliderProps): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateSwitchProps, type Switch as SwitchReturn } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "input" | "root" | "thumb") => Record<string, string>;
|
|
4
4
|
export declare function setCtx(props: CreateSwitchProps): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="svelte" />
|
|
2
2
|
import { type CreateToggleProps, type Toggle as ToggleReturn } from "@melt-ui/svelte";
|
|
3
|
-
export declare const getAttrs: (part: "
|
|
3
|
+
export declare const getAttrs: (part: "input" | "root") => Record<string, string>;
|
|
4
4
|
export declare function setCtx(props: CreateToggleProps): {
|
|
5
5
|
updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
|
|
6
6
|
elements: {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { isBrowser } from ".";
|
|
2
|
+
/**
|
|
3
|
+
* Handles `initialFocus` prop behavior for the
|
|
4
|
+
* Calendar & RangeCalendar components.
|
|
5
|
+
*/
|
|
6
|
+
export function handleCalendarInitialFocus(calendar) {
|
|
7
|
+
if (!isBrowser)
|
|
8
|
+
return;
|
|
9
|
+
const selectedDay = calendar.querySelector("[data-selected]");
|
|
10
|
+
if (selectedDay)
|
|
11
|
+
return focusWithoutScroll(selectedDay);
|
|
12
|
+
const today = calendar.querySelector("[data-today]");
|
|
13
|
+
if (today)
|
|
14
|
+
return focusWithoutScroll(today);
|
|
15
|
+
const firstDay = calendar.querySelector("[data-calendar-date]");
|
|
16
|
+
if (firstDay)
|
|
17
|
+
return focusWithoutScroll(firstDay);
|
|
18
|
+
}
|
|
19
|
+
export function focusWithoutScroll(element) {
|
|
20
|
+
const scrollPosition = {
|
|
21
|
+
x: window.pageXOffset || document.documentElement.scrollLeft,
|
|
22
|
+
y: window.pageYOffset || document.documentElement.scrollTop
|
|
23
|
+
};
|
|
24
|
+
element.focus();
|
|
25
|
+
window.scrollTo(scrollPosition.x, scrollPosition.y);
|
|
26
|
+
}
|
package/dist/internal/index.d.ts
CHANGED
package/dist/internal/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bits-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": "github:huntabyte/bits-ui",
|
|
6
6
|
"exports": {
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"type": "module",
|
|
75
75
|
"dependencies": {
|
|
76
76
|
"@internationalized/date": "^3.5.0",
|
|
77
|
-
"@melt-ui/svelte": "0.64.
|
|
77
|
+
"@melt-ui/svelte": "0.64.5",
|
|
78
78
|
"nanoid": "^5.0.4"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|