@svelte-atoms/core 1.0.0-alpha.32 → 1.0.0-alpha.33

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.
Files changed (3) hide show
  1. package/dist/components/date-picker/bond.svelte.js +2 -1
  2. package/dist/components/date-picker/date-picker-calendar.svelte +60 -67
  3. package/package.json +1 -1
package/dist/components/date-picker/bond.svelte.js CHANGED
@@ -33,8 +33,9 @@ export class DatePickerBond extends PopoverBond {
33
33
  };
34
34
  }
35
35
  content() {
36
+ const superProps = super.content();
36
37
  return {
37
- ...super.content(),
38
+ ...superProps,
38
39
  id: `date-picker-calendar-${this.id}`,
39
40
  role: 'dialog',
40
41
  'aria-label': 'Choose date'
package/dist/components/date-picker/date-picker-calendar.svelte CHANGED
@@ -1,67 +1,60 @@
1
- <script lang="ts">
2
- import { Content } from '../popover/atoms';
3
- import {
4
- Root,
5
- Header as CalendarHeader,
6
- Body as CalendarBody,
7
- Day as CalendarDay
8
- } from '../calendar/atoms';
9
- import { DatePickerBond } from './bond.svelte';
10
- import DatePickerHeader from './date-picker-header.svelte';
11
- import DatePickerMonths from './date-picker-months.svelte';
12
- import DatePickerYears from './date-picker-years.svelte';
13
- import { HtmlAtom } from '../atom';
14
- import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
15
- import type { DatePickerCalendarProps } from './types';
16
-
17
- const datePickerBond = DatePickerBond.get();
18
- const datePickerBondProps = $derived(datePickerBond?.state.props);
19
-
20
- let {
21
- class: klass = '',
22
- preset = 'datepicker.calendar',
23
- children: childrenProp,
24
- Header = DatePickerHeader,
25
- Weekdays = CalendarHeader,
26
- Body = CalendarBody,
27
- Day = CalendarDay,
28
- Months = DatePickerMonths,
29
- Years = DatePickerYears,
30
- ...restProps
31
- }: DatePickerCalendarProps = $props();
32
-
33
- const calendarProps = $derived({
34
- ...datePickerBond?.content(),
35
- ...datePickerBondProps,
36
- ...restProps
37
- });
38
-
39
- function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
40
- if (!datePickerBond) return;
41
-
42
- datePickerBond.state.props.range = range;
43
- datePickerBond.state.props.pivote = pivote;
44
- }
45
- </script>
46
-
47
- <Content
48
- class={['relative overflow-hidden p-0', klass]}
49
- base={Root}
50
- onchange={handleChange}
51
- {preset}
52
- {...calendarProps}
53
- >
54
- <HtmlAtom base={Header} class="col-span-full" />
55
- <HtmlAtom base={Weekdays} class="border-0" />
56
-
57
- <HtmlAtom base={Body}>
58
- {#snippet children({ day }: { day: CalendarDayType })}
59
- <HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
60
- <span class="value">{day.dayOfMonth}</span>
61
- </HtmlAtom>
62
- {/snippet}
63
- </HtmlAtom>
64
-
65
- <HtmlAtom base={Months} />
66
- <HtmlAtom base={Years} />
67
- </Content>
1
+ <script lang="ts">
2
+ import { Content } from '../popover/atoms';
3
+ import {
4
+ Root,
5
+ Header as CalendarHeader,
6
+ Body as CalendarBody,
7
+ Day as CalendarDay
8
+ } from '../calendar/atoms';
9
+ import { DatePickerBond } from './bond.svelte';
10
+ import DatePickerHeader from './date-picker-header.svelte';
11
+ import DatePickerMonths from './date-picker-months.svelte';
12
+ import DatePickerYears from './date-picker-years.svelte';
13
+ import { HtmlAtom } from '../atom';
14
+ import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
15
+ import type { DatePickerCalendarProps } from './types';
16
+
17
+ const datePickerBond = DatePickerBond.get();
18
+
19
+ let {
20
+ class: klass = '',
21
+ preset = 'datepicker.calendar',
22
+ children: childrenProp,
23
+ Header = DatePickerHeader,
24
+ Weekdays = CalendarHeader,
25
+ Body = CalendarBody,
26
+ Day = CalendarDay,
27
+ Months = DatePickerMonths,
28
+ Years = DatePickerYears,
29
+ ...restProps
30
+ }: DatePickerCalendarProps = $props();
31
+
32
+ function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
33
+ if (!datePickerBond) return;
34
+
35
+ datePickerBond.state.props.range = range;
36
+ datePickerBond.state.props.pivote = pivote;
37
+ }
38
+ </script>
39
+
40
+ <Content
41
+ class={['relative overflow-hidden p-0', klass]}
42
+ base={Root}
43
+ onchange={handleChange}
44
+ {preset}
45
+ {...restProps}
46
+ >
47
+ <HtmlAtom base={Header} class="col-span-full" />
48
+ <HtmlAtom base={Weekdays} class="border-0" />
49
+
50
+ <HtmlAtom base={Body}>
51
+ {#snippet children({ day }: { day: CalendarDayType })}
52
+ <HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
53
+ <span class="value">{day.dayOfMonth}</span>
54
+ </HtmlAtom>
55
+ {/snippet}
56
+ </HtmlAtom>
57
+
58
+ <HtmlAtom base={Months} />
59
+ <HtmlAtom base={Years} />
60
+ </Content>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@svelte-atoms/core",
3
- "version": "1.0.0-alpha.32",
3
+ "version": "1.0.0-alpha.33",
4
4
  "description": "A modular, accessible, and extensible Svelte UI component library.",
5
5
  "repository": {
6
6
  "type": "git",