ui-ingredients 0.0.19 → 0.0.20
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/README.md +1 -1
- package/dist/collapsible/root.svelte +2 -2
- package/dist/collapsible/trigger.svelte +2 -2
- package/dist/date-picker/anatomy.js +3 -0
- package/dist/date-picker/clear-trigger.svelte +19 -2
- package/dist/date-picker/clear-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/content.svelte +19 -2
- package/dist/date-picker/content.svelte.d.ts +3 -3
- package/dist/date-picker/context.svelte.d.ts +8 -8
- package/dist/date-picker/context.svelte.js +6 -14
- package/dist/date-picker/control.svelte +19 -2
- package/dist/date-picker/control.svelte.d.ts +3 -3
- package/dist/date-picker/create-date-picker.svelte.d.ts +14 -0
- package/dist/date-picker/create-date-picker.svelte.js +24 -0
- package/dist/date-picker/date-picker.d.ts +3 -3
- package/dist/date-picker/date-picker.js +3 -3
- package/dist/date-picker/day-table-cell-trigger.svelte +21 -2
- package/dist/date-picker/day-table-cell-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/day-table-cell.svelte +40 -2
- package/dist/date-picker/day-table-cell.svelte.d.ts +3 -3
- package/dist/date-picker/index.d.ts +29 -0
- package/dist/date-picker/index.js +2 -0
- package/dist/date-picker/input.svelte +18 -2
- package/dist/date-picker/input.svelte.d.ts +3 -3
- package/dist/date-picker/label.svelte +20 -2
- package/dist/date-picker/label.svelte.d.ts +3 -3
- package/dist/date-picker/month-select.svelte +40 -2
- package/dist/date-picker/month-select.svelte.d.ts +3 -3
- package/dist/date-picker/month-table-cell-trigger.svelte +21 -2
- package/dist/date-picker/month-table-cell-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/month-table-cell.svelte +40 -2
- package/dist/date-picker/month-table-cell.svelte.d.ts +3 -3
- package/dist/date-picker/next-trigger.svelte +21 -2
- package/dist/date-picker/next-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/positioner.svelte +19 -2
- package/dist/date-picker/positioner.svelte.d.ts +3 -3
- package/dist/date-picker/preset-trigger.svelte +21 -2
- package/dist/date-picker/preset-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/prev-trigger.svelte +21 -2
- package/dist/date-picker/prev-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/range-text.svelte +23 -2
- package/dist/date-picker/range-text.svelte.d.ts +3 -3
- package/dist/date-picker/root.svelte +85 -2
- package/dist/date-picker/root.svelte.d.ts +3 -3
- package/dist/date-picker/table-body.svelte +21 -2
- package/dist/date-picker/table-body.svelte.d.ts +3 -3
- package/dist/date-picker/table-head.svelte +21 -2
- package/dist/date-picker/table-head.svelte.d.ts +3 -3
- package/dist/date-picker/table-header.svelte +21 -2
- package/dist/date-picker/table-header.svelte.d.ts +3 -3
- package/dist/date-picker/table-row.svelte +21 -2
- package/dist/date-picker/table-row.svelte.d.ts +3 -3
- package/dist/date-picker/table.svelte +31 -2
- package/dist/date-picker/table.svelte.d.ts +3 -3
- package/dist/date-picker/trigger.svelte +19 -2
- package/dist/date-picker/trigger.svelte.d.ts +3 -3
- package/dist/date-picker/view-control.svelte +21 -2
- package/dist/date-picker/view-control.svelte.d.ts +3 -3
- package/dist/date-picker/view.svelte +24 -0
- package/dist/date-picker/{view-trigger.svelte.d.ts → view.svelte.d.ts} +5 -5
- package/dist/date-picker/year-select.svelte +40 -2
- package/dist/date-picker/year-select.svelte.d.ts +3 -3
- package/dist/date-picker/year-table-cell-trigger.svelte +21 -2
- package/dist/date-picker/year-table-cell-trigger.svelte.d.ts +3 -3
- package/dist/date-picker/year-table-cell.svelte +40 -2
- package/dist/date-picker/year-table-cell.svelte.d.ts +3 -3
- package/package.json +2 -2
- package/dist/date-picker/view-trigger.svelte +0 -3
package/README.md
CHANGED
@@ -39,11 +39,11 @@
|
|
39
39
|
onExitComplete,
|
40
40
|
});
|
41
41
|
|
42
|
-
let
|
42
|
+
let attrs = $derived(mergeProps(props, context.getRootProps()));
|
43
43
|
|
44
44
|
collapsibleContext.set(context);
|
45
45
|
</script>
|
46
46
|
|
47
|
-
<div {...
|
47
|
+
<div {...attrs}>
|
48
48
|
{@render children?.(context)}
|
49
49
|
</div>
|
@@ -12,9 +12,9 @@
|
|
12
12
|
|
13
13
|
let context = collapsibleContext.get();
|
14
14
|
|
15
|
-
let
|
15
|
+
let attrs = $derived(mergeProps(props, context.getTriggerProps()));
|
16
16
|
</script>
|
17
17
|
|
18
|
-
<button type="button" {...
|
18
|
+
<button type="button" {...attrs}>
|
19
19
|
{@render children?.()}
|
20
20
|
</button>
|
@@ -1,3 +1,20 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlProps} from '../types.js';
|
2
3
|
|
3
|
-
<
|
4
|
+
export interface DatePickerClearTriggerProps extends HtmlProps<'button'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {datePickerContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: DatePickerClearTriggerProps = $props();
|
12
|
+
|
13
|
+
let context = datePickerContext.get();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<button type="button" {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</button>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const ClearTrigger: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const ClearTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerClearTriggerProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type ClearTrigger = InstanceType<typeof ClearTrigger>;
|
18
18
|
export default ClearTrigger;
|
@@ -1,3 +1,20 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlProps} from '../types.js';
|
2
3
|
|
3
|
-
<
|
4
|
+
export interface DatePickerContentProps extends HtmlProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {datePickerContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: DatePickerContentProps = $props();
|
12
|
+
|
13
|
+
let context = datePickerContext.get();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getContentProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<div {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</div>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const Content: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const Content: $$__sveltets_2_IsomorphicComponent<DatePickerContentProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type Content = InstanceType<typeof Content>;
|
18
18
|
export default Content;
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
}
|
4
|
-
export
|
5
|
-
|
6
|
-
export declare
|
7
|
-
export declare
|
8
|
-
export declare
|
1
|
+
import { Context } from '../utils.svelte.js';
|
2
|
+
import type { DayTableCellProps, TableCellProps, TableProps, ViewProps } from '@zag-js/date-picker';
|
3
|
+
import type { CreateDatePickerReturn } from './create-date-picker.svelte.js';
|
4
|
+
export declare const datePickerContext: Context<CreateDatePickerReturn>;
|
5
|
+
export declare const datePickerViewPropsContext: Context<ViewProps>;
|
6
|
+
export declare const datePickerTablePropsContext: Context<TableProps>;
|
7
|
+
export declare const datePickerTableCellPropsContext: Context<TableCellProps>;
|
8
|
+
export declare const datePickerDayTableCellPropsContext: Context<DayTableCellProps>;
|
@@ -1,14 +1,6 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
|
4
|
-
export
|
5
|
-
|
6
|
-
|
7
|
-
return api;
|
8
|
-
}
|
9
|
-
export function setDatePickerContext(value) {
|
10
|
-
setContext('DatePicker', value);
|
11
|
-
}
|
12
|
-
export function useDatePickerContext() {
|
13
|
-
return getContext('DatePicker');
|
14
|
-
}
|
1
|
+
import { Context } from '../utils.svelte.js';
|
2
|
+
export const datePickerContext = new Context('DatePicker');
|
3
|
+
export const datePickerViewPropsContext = new Context('DatePickerView');
|
4
|
+
export const datePickerTablePropsContext = new Context('DatePickerTable');
|
5
|
+
export const datePickerTableCellPropsContext = new Context('DatePickerTableCell');
|
6
|
+
export const datePickerDayTableCellPropsContext = new Context('DatePickerDayTableCell');
|
@@ -1,3 +1,20 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlProps} from '../types.js';
|
2
3
|
|
3
|
-
<
|
4
|
+
export interface DatePickerControlProps extends HtmlProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {datePickerContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: DatePickerControlProps = $props();
|
12
|
+
|
13
|
+
let context = datePickerContext.get();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getControlProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<div {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</div>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const Control: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const Control: $$__sveltets_2_IsomorphicComponent<DatePickerControlProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type Control = InstanceType<typeof Control>;
|
18
18
|
export default Control;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as datePicker from '@zag-js/date-picker';
|
2
|
+
type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'locale' | 'getRootNode' | 'open.controlled';
|
3
|
+
export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
|
4
|
+
id?: string | null;
|
5
|
+
min?: string | Date;
|
6
|
+
max?: string | Date;
|
7
|
+
value?: string[] | Date[];
|
8
|
+
focusedValue?: string | Date;
|
9
|
+
defaultOpen?: boolean;
|
10
|
+
}
|
11
|
+
export interface CreateDatePickerReturn extends datePicker.Api {
|
12
|
+
}
|
13
|
+
export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
|
14
|
+
export {};
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
|
2
|
+
import { getLocaleContext } from '../locale-provider/context.svelte.js';
|
3
|
+
import { createUniqueId } from '../utils.svelte.js';
|
4
|
+
import * as datePicker from '@zag-js/date-picker';
|
5
|
+
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
6
|
+
export function createDatePicker(props) {
|
7
|
+
const localeContext = getLocaleContext();
|
8
|
+
const environmentContext = getEnvironmentContext();
|
9
|
+
const [state, send] = useMachine(datePicker.machine({
|
10
|
+
...props,
|
11
|
+
id: props.id ?? createUniqueId(),
|
12
|
+
dir: localeContext?.dir,
|
13
|
+
min: props.min ? datePicker.parse(props.min) : undefined,
|
14
|
+
max: props.max ? datePicker.parse(props.max) : undefined,
|
15
|
+
value: props.value ? datePicker.parse(props.value) : undefined,
|
16
|
+
focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
|
17
|
+
open: props.defaultOpen,
|
18
|
+
'open.controlled': props.open != null,
|
19
|
+
locale: localeContext?.locale,
|
20
|
+
getRootNode: environmentContext?.getRootNode,
|
21
|
+
}));
|
22
|
+
const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
|
23
|
+
return api;
|
24
|
+
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
export { default as ClearTrigger } from './clear-trigger.svelte';
|
2
2
|
export { default as Content } from './content.svelte';
|
3
3
|
export { default as Control } from './control.svelte';
|
4
|
-
export { default as
|
5
|
-
export { default as
|
4
|
+
export { default as DayTableCellTrigger } from './day-table-cell-trigger.svelte';
|
5
|
+
export { default as DayTableCell } from './day-table-cell.svelte';
|
6
6
|
export { default as Input } from './input.svelte';
|
7
7
|
export { default as Label } from './label.svelte';
|
8
8
|
export { default as MonthSelect } from './month-select.svelte';
|
@@ -21,7 +21,7 @@ export { default as TableRow } from './table-row.svelte';
|
|
21
21
|
export { default as Table } from './table.svelte';
|
22
22
|
export { default as Trigger } from './trigger.svelte';
|
23
23
|
export { default as ViewControl } from './view-control.svelte';
|
24
|
-
export { default as
|
24
|
+
export { default as View } from './view.svelte';
|
25
25
|
export { default as YearSelect } from './year-select.svelte';
|
26
26
|
export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';
|
27
27
|
export { default as YearTableCell } from './year-table-cell.svelte';
|
@@ -1,8 +1,8 @@
|
|
1
1
|
export { default as ClearTrigger } from './clear-trigger.svelte';
|
2
2
|
export { default as Content } from './content.svelte';
|
3
3
|
export { default as Control } from './control.svelte';
|
4
|
-
export { default as
|
5
|
-
export { default as
|
4
|
+
export { default as DayTableCellTrigger } from './day-table-cell-trigger.svelte';
|
5
|
+
export { default as DayTableCell } from './day-table-cell.svelte';
|
6
6
|
export { default as Input } from './input.svelte';
|
7
7
|
export { default as Label } from './label.svelte';
|
8
8
|
export { default as MonthSelect } from './month-select.svelte';
|
@@ -21,7 +21,7 @@ export { default as TableRow } from './table-row.svelte';
|
|
21
21
|
export { default as Table } from './table.svelte';
|
22
22
|
export { default as Trigger } from './trigger.svelte';
|
23
23
|
export { default as ViewControl } from './view-control.svelte';
|
24
|
-
export { default as
|
24
|
+
export { default as View } from './view.svelte';
|
25
25
|
export { default as YearSelect } from './year-select.svelte';
|
26
26
|
export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';
|
27
27
|
export { default as YearTableCell } from './year-table-cell.svelte';
|
@@ -1,3 +1,22 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlProps} from '../types.js';
|
2
3
|
|
3
|
-
<
|
4
|
+
export interface DatePickerDayTableCellTriggerProps extends HtmlProps<'button'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: DatePickerDayTableCellTriggerProps = $props();
|
12
|
+
|
13
|
+
let context = datePickerContext.get();
|
14
|
+
|
15
|
+
let tableCellProps = datePickerDayTableCellPropsContext.get();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getDayTableCellTriggerProps(tableCellProps)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<button type="button" {...attrs}>
|
21
|
+
{@render children?.()}
|
22
|
+
</button>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const DayTableCellTrigger: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const DayTableCellTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerDayTableCellTriggerProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type DayTableCellTrigger = InstanceType<typeof DayTableCellTrigger>;
|
18
18
|
export default DayTableCellTrigger;
|
@@ -1,3 +1,41 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlProps} from '../types.js';
|
3
|
+
import type {DayTableCellProps, DayTableCellState} from '@zag-js/date-picker';
|
4
|
+
import type {Snippet} from 'svelte';
|
2
5
|
|
3
|
-
|
6
|
+
export interface DatePickerDayTableCellProps
|
7
|
+
extends Assign<Omit<HtmlProps<'div'>, 'children'>, DayTableCellProps> {
|
8
|
+
children?: Snippet<[state: DayTableCellState]>;
|
9
|
+
}
|
10
|
+
</script>
|
11
|
+
|
12
|
+
<script lang="ts">
|
13
|
+
import {mergeProps} from '@zag-js/svelte';
|
14
|
+
import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
|
15
|
+
|
16
|
+
let {
|
17
|
+
/**/
|
18
|
+
value,
|
19
|
+
disabled,
|
20
|
+
visibleRange,
|
21
|
+
children,
|
22
|
+
...props
|
23
|
+
}: DatePickerDayTableCellProps = $props();
|
24
|
+
|
25
|
+
let context = datePickerContext.get();
|
26
|
+
|
27
|
+
let tableCellProps: DayTableCellProps = $derived({
|
28
|
+
value,
|
29
|
+
disabled,
|
30
|
+
visibleRange,
|
31
|
+
});
|
32
|
+
|
33
|
+
let state = $derived(context.getDayTableCellState(tableCellProps));
|
34
|
+
let attrs = $derived(mergeProps(props, context.getDayTableCellProps(tableCellProps)));
|
35
|
+
|
36
|
+
datePickerDayTableCellPropsContext.set(() => tableCellProps);
|
37
|
+
</script>
|
38
|
+
|
39
|
+
<div {...attrs}>
|
40
|
+
{@render children?.(state)}
|
41
|
+
</div>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const DayTableCell: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const DayTableCell: $$__sveltets_2_IsomorphicComponent<DatePickerDayTableCellProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type DayTableCell = InstanceType<typeof DayTableCell>;
|
18
18
|
export default DayTableCell;
|
@@ -1 +1,30 @@
|
|
1
|
+
export { parse as parseDate } from '@zag-js/date-picker';
|
2
|
+
export { datePickerAnatomy } from './anatomy.js';
|
1
3
|
export * as DatePicker from './date-picker.js';
|
4
|
+
export type { DatePickerClearTriggerProps } from './clear-trigger.svelte';
|
5
|
+
export type { DatePickerContentProps } from './content.svelte';
|
6
|
+
export type { DatePickerControlProps } from './control.svelte';
|
7
|
+
export type { DatePickerDayTableCellTriggerProps } from './day-table-cell-trigger.svelte';
|
8
|
+
export type { DatePickerDayTableCellProps } from './day-table-cell.svelte';
|
9
|
+
export type { DatePickerInputProps } from './input.svelte';
|
10
|
+
export type { DatePickerLabelProps } from './label.svelte';
|
11
|
+
export type { DatePickerMonthSelectProps } from './month-select.svelte';
|
12
|
+
export type { DatePickerMonthTableCellTriggerProps } from './month-table-cell-trigger.svelte';
|
13
|
+
export type { DatePickerMonthTableCellProps } from './month-table-cell.svelte';
|
14
|
+
export type { DatePickerNextTriggerProps } from './next-trigger.svelte';
|
15
|
+
export type { DatePickerPositionerProps } from './positioner.svelte';
|
16
|
+
export type { DatePickerPresetTriggerProps } from './preset-trigger.svelte';
|
17
|
+
export type { DatePickerPrevTriggerProps } from './prev-trigger.svelte';
|
18
|
+
export type { DatePickerRangeTextProps } from './range-text.svelte';
|
19
|
+
export type { DatePickerProps } from './root.svelte';
|
20
|
+
export type { DatePickerTableBodyProps } from './table-body.svelte';
|
21
|
+
export type { DatePickerTableHeadProps } from './table-head.svelte';
|
22
|
+
export type { DatePickerTableHeaderProps } from './table-header.svelte';
|
23
|
+
export type { DatePickerTableRowProps } from './table-row.svelte';
|
24
|
+
export type { DatePickerTableProps } from './table.svelte';
|
25
|
+
export type { DatePickerTriggerProps } from './trigger.svelte';
|
26
|
+
export type { DatePickerViewControlProps } from './view-control.svelte';
|
27
|
+
export type { DatePickerViewProps } from './view.svelte';
|
28
|
+
export type { DatePickerYearSelectProps } from './year-select.svelte';
|
29
|
+
export type { DatePickerYearTableCellTriggerProps } from './year-table-cell-trigger.svelte';
|
30
|
+
export type { DatePickerYearTableCellProps } from './year-table-cell.svelte';
|
@@ -1,3 +1,19 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlProps} from '../types.js';
|
3
|
+
import type {InputProps} from '@zag-js/date-picker';
|
2
4
|
|
3
|
-
<
|
5
|
+
export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {datePickerContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {index, children, ...props}: DatePickerInputProps = $props();
|
13
|
+
|
14
|
+
let context = datePickerContext.get();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(props, context.getInputProps({index})));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<input {...attrs} />
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const Input: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const Input: $$__sveltets_2_IsomorphicComponent<DatePickerInputProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type Input = InstanceType<typeof Input>;
|
18
18
|
export default Input;
|
@@ -1,3 +1,21 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlProps} from '../types.js';
|
3
|
+
import type {LabelProps} from '@zag-js/date-picker';
|
2
4
|
|
3
|
-
<
|
5
|
+
export interface DatePickerLabelProps extends Assign<HtmlProps<'label'>, LabelProps> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {datePickerContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {index, children, ...props}: DatePickerLabelProps = $props();
|
13
|
+
|
14
|
+
let context = datePickerContext.get();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(props, context.getLabelProps({index})));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<label {...attrs}>
|
20
|
+
{@render children?.()}
|
21
|
+
</label>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const Label: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const Label: $$__sveltets_2_IsomorphicComponent<DatePickerLabelProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type Label = InstanceType<typeof Label>;
|
18
18
|
export default Label;
|
@@ -1,3 +1,41 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlProps} from '../types.js';
|
2
3
|
|
3
|
-
<
|
4
|
+
export interface DatePickerMonthSelectProps extends HtmlProps<'select'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {datePickerContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: DatePickerMonthSelectProps = $props();
|
12
|
+
|
13
|
+
let context = datePickerContext.get();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getMonthSelectProps()));
|
16
|
+
|
17
|
+
const months = [
|
18
|
+
'January',
|
19
|
+
'February',
|
20
|
+
'March',
|
21
|
+
'April',
|
22
|
+
'May',
|
23
|
+
'June',
|
24
|
+
'July',
|
25
|
+
'August',
|
26
|
+
'September',
|
27
|
+
'October',
|
28
|
+
'November',
|
29
|
+
'December',
|
30
|
+
];
|
31
|
+
</script>
|
32
|
+
|
33
|
+
<select {...attrs}>
|
34
|
+
{#if children}
|
35
|
+
{@render children()}
|
36
|
+
{:else}
|
37
|
+
{#each months as month, index}
|
38
|
+
<option value={index}>{month}</option>
|
39
|
+
{/each}
|
40
|
+
{/if}
|
41
|
+
</select>
|
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
2
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
3
|
$$bindings?: Bindings;
|
4
4
|
} & Exports;
|
5
|
-
(internal: unknown, props: {
|
5
|
+
(internal: unknown, props: Props & {
|
6
6
|
$$events?: Events;
|
7
7
|
$$slots?: Slots;
|
8
8
|
}): Exports & {
|
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
11
11
|
};
|
12
12
|
z_$$bindings?: Bindings;
|
13
13
|
}
|
14
|
-
declare const MonthSelect: $$__sveltets_2_IsomorphicComponent<
|
14
|
+
declare const MonthSelect: $$__sveltets_2_IsomorphicComponent<DatePickerMonthSelectProps, {
|
15
15
|
[evt: string]: CustomEvent<any>;
|
16
|
-
}, {}, {},
|
16
|
+
}, {}, {}, "">;
|
17
17
|
type MonthSelect = InstanceType<typeof MonthSelect>;
|
18
18
|
export default MonthSelect;
|
@@ -1,3 +1,22 @@
|
|
1
|
-
<script lang="ts" module
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlProps} from '../types.js';
|
2
3
|
|
3
|
-
<
|
4
|
+
export interface DatePickerMonthTableCellTriggerProps extends HtmlProps<'button'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: DatePickerMonthTableCellTriggerProps = $props();
|
12
|
+
|
13
|
+
let context = datePickerContext.get();
|
14
|
+
|
15
|
+
let tableCellProps = datePickerTableCellPropsContext.get();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getMonthTableCellTriggerProps(tableCellProps)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<button type="button" {...attrs}>
|
21
|
+
{@render children?.()}
|
22
|
+
</button>
|