mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(date-picker): correctly type change event for single/range types

Browse source
This commit is contained in:
Eric Y Liu 2021-07-08 13:50:54 -07:00
commit 9353e36921
4 changed files with 32 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

37
COMPONENT_INDEX.md
View file

@ -1047,18 +1047,17 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the date picker input value |
| datePickerType | <code>let</code> | No | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code> | Specify the date picker type |
| appendTo | <code>let</code> | No | <code>HTMLElement</code> | -- | Specify the element to append the calendar to |
| dateFormat | <code>let</code> | No | <code>string</code> | <code>"m/d/Y"</code> | Specify the date format |
| maxDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the maximum date |
| minDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the minimum date |
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| short | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the short variant |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------- |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the date picker input value |
| datePickerType | <code>let</code> | No | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code> | Specify the date picker type |
| dateFormat | <code>let</code> | No | <code>string</code> | <code>"m/d/Y"</code> | Specify the date format |
| maxDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the maximum date |
| minDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the minimum date |
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| short | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the short variant |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element |
### Slots
@ -1068,13 +1067,13 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| change | dispatched | <code>string &#124; { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string &#124; { from: string; to: string; } }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `DatePickerInput`

17
docs/src/COMPONENT_API.json
View file

@ -2392,15 +2392,6 @@
"constant": false,
"reactive": true
},
{
"name": "appendTo",
"kind": "let",
"description": "Specify the element to append the calendar to",
"type": "HTMLElement",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "dateFormat",
"kind": "let",
@ -2474,11 +2465,15 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "dispatched",
"name": "change",
"detail": "string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } }"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "change" }
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }

2
src/DatePicker/DatePicker.svelte
View file

@ -1,6 +1,6 @@
<script>
/**
* @dispatch {string} change
* @event {string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } }} change
*/
/**

13
types/DatePicker/DatePicker.d.ts vendored
View file

@ -15,11 +15,6 @@ export interface DatePickerProps
*/
value?: number | string;
/**
* Specify the element to append the calendar to
*/
appendTo?: HTMLElement;
/**
* Specify the date format
* @default "m/d/Y"
@ -66,11 +61,17 @@ export interface DatePickerProps
export default class DatePicker extends SvelteComponentTyped<
DatePickerProps,
{
change: CustomEvent<
| string
| {
selectedDates: [dateFrom: Date, dateTo?: Date];
dateStr: string | { from: string; to: string };
}
>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
change: CustomEvent<any>;
},
{ default: {} }
> {}