diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 6ea0e63f..e7e6c1a6 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -963,7 +963,7 @@ export interface DataTableRow { [key: string]: DataTableValue; } -export type DataTableRowId = string; +export type DataTableRowId = any; export interface DataTableCell { key: DataTableKey; @@ -3242,6 +3242,8 @@ None. | Event name | Type | Detail | | :--------- | :--------- | :------------------ | | change | dispatched | string | +| input | forwarded | -- | +| focus | forwarded | -- | | blur | forwarded | -- | ## `SelectItem` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 9ccebf74..d4aab212 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2431,9 +2431,9 @@ "ts": "interface DataTableRow { id: any; [key: string]: DataTableValue; }" }, { - "type": "string", + "type": "any", "name": "DataTableRowId", - "ts": "type DataTableRowId = string" + "ts": "type DataTableRowId = any" }, { "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }", @@ -9304,6 +9304,8 @@ ], "events": [ { "type": "dispatched", "name": "change", "detail": "string" }, + { "type": "forwarded", "name": "input", "element": "select" }, + { "type": "forwarded", "name": "focus", "element": "select" }, { "type": "forwarded", "name": "blur", "element": "select" } ], "typedefs": [], diff --git a/rollup.config.js b/rollup.config.js index 42daf964..419a5485 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -10,14 +10,12 @@ export default ["es", "umd"].map((format) => { return { input: "src", + inlineDynamicImports: true, output: { format, file: UMD ? pkg.main : pkg.module, name: UMD ? "carbon-components-svelte" : undefined, - globals: { - flatpickr: "flatpickr", - "clipboard-copy": "copy", - }, + globals: { flatpickr: "flatpickr" }, }, external: Object.keys(pkg.dependencies), plugins: [ diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 8e12d4c0..cd35c63d 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -6,7 +6,7 @@ * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow - * @typedef {string} DataTableRowId + * @typedef {any} DataTableRowId * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell * @slot {{ row: DataTableRow; }} expanded-row * @slot {{ header: DataTableNonEmptyHeader; }} cell-header diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index c9b75c16..00a9c81c 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -128,43 +128,43 @@ }, }); + async function initCalendar() { + calendar = await createCalendar({ + options: { + appendTo: datePickerRef, + dateFormat, + defaultDate: $inputValue, + locale, + maxDate, + minDate, + mode: $mode, + }, + base: inputRef, + input: inputRefTo, + dispatch: (event) => { + const detail = { selectedDates: calendar.selectedDates }; + + if ($range) { + const from = inputRef.value; + const to = inputRefTo.value; + + detail.dateStr = { + from: inputRef.value, + to: inputRefTo.value, + }; + + valueFrom = from; + valueTo = to; + } else { + detail.dateStr = inputRef.value; + } + + return dispatch(event, detail); + }, + }); + } + afterUpdate(() => { - if ($hasCalendar && !calendar) { - calendar = createCalendar({ - options: { - appendTo: datePickerRef, - dateFormat, - defaultDate: $inputValue, - locale, - maxDate, - minDate, - mode: $mode, - }, - base: inputRef, - input: inputRefTo, - dispatch: (event) => { - const detail = { selectedDates: calendar.selectedDates }; - - if ($range) { - const from = inputRef.value; - const to = inputRefTo.value; - - detail.dateStr = { - from: inputRef.value, - to: inputRefTo.value, - }; - - valueFrom = from; - valueTo = to; - } else { - detail.dateStr = inputRef.value; - } - - return dispatch(event, detail); - }, - }); - } - if (calendar) { if ($range) { calendar.setDate([$inputValueFrom, $inputValueTo]); @@ -189,6 +189,7 @@ $: valueFrom = $inputValueFrom; $: inputValueTo.set(valueTo); $: valueTo = $inputValueTo; + $: if ($hasCalendar && !calendar && inputRef) initCalendar(); { - declareRef({ id, ref }); - }); + $: if (ref) declareRef({ id, ref });
{ - dispatch("change", value); - }); - let inputValue = value; + $: dispatch("change", value); $: incrementLabel = translateWithId("increment"); $: decrementLabel = translateWithId("decrement"); $: value = Number(inputValue); diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 7e89f3cf..d7c3d8b5 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -175,6 +175,7 @@