@cratis/components 1.10.1 → 2.0.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/README.md +475 -4
- package/dist/cjs/CommandDialog/CommandDialog.js +94 -4
- package/dist/cjs/CommandDialog/CommandDialog.js.map +1 -1
- package/dist/cjs/CommandDialog/CommandStepper.js +63 -3
- package/dist/cjs/CommandDialog/CommandStepper.js.map +1 -1
- package/dist/cjs/CommandDialog/StepperCommandDialog.js +95 -6
- package/dist/cjs/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/cjs/CommandForm/fields/CalendarField.js +14 -1
- package/dist/cjs/CommandForm/fields/CalendarField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/CheckboxField.js +10 -1
- package/dist/cjs/CommandForm/fields/CheckboxField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/ChipsField.js +11 -1
- package/dist/cjs/CommandForm/fields/ChipsField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/ColorPickerField.js +17 -1
- package/dist/cjs/CommandForm/fields/ColorPickerField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/DropdownField.js +16 -1
- package/dist/cjs/CommandForm/fields/DropdownField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/InputTextField.js +41 -1
- package/dist/cjs/CommandForm/fields/InputTextField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/MultiSelectField.js +13 -1
- package/dist/cjs/CommandForm/fields/MultiSelectField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/NumberField.js +11 -1
- package/dist/cjs/CommandForm/fields/NumberField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/RadioButtonField.js +23 -0
- package/dist/cjs/CommandForm/fields/RadioButtonField.js.map +1 -0
- package/dist/cjs/CommandForm/fields/RadioGroupField.js +40 -0
- package/dist/cjs/CommandForm/fields/RadioGroupField.js.map +1 -0
- package/dist/cjs/CommandForm/fields/SliderField.js +10 -1
- package/dist/cjs/CommandForm/fields/SliderField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/TextAreaField.js +12 -1
- package/dist/cjs/CommandForm/fields/TextAreaField.js.map +1 -1
- package/dist/cjs/CommandForm/index.js +4 -0
- package/dist/cjs/CommandForm/index.js.map +1 -1
- package/dist/cjs/Common/CratisComponentsProvider.js +44 -0
- package/dist/cjs/Common/CratisComponentsProvider.js.map +1 -0
- package/dist/cjs/Common/ErrorBoundary.js +32 -0
- package/dist/cjs/Common/ErrorBoundary.js.map +1 -1
- package/dist/cjs/Common/FormElement.css +26 -0
- package/dist/cjs/Common/FormElement.js +14 -1
- package/dist/cjs/Common/FormElement.js.map +1 -1
- package/dist/cjs/Common/Page.js +13 -0
- package/dist/cjs/Common/Page.js.map +1 -1
- package/dist/cjs/Common/Tooltip.css +3 -3
- package/dist/cjs/Common/index.js +4 -0
- package/dist/cjs/Common/index.js.map +1 -1
- package/dist/cjs/DataPage/DataPage.js +113 -8
- package/dist/cjs/DataPage/DataPage.js.map +1 -1
- package/dist/cjs/DataTables/DataTableForObservableQuery.js +65 -6
- package/dist/cjs/DataTables/DataTableForObservableQuery.js.map +1 -1
- package/dist/cjs/DataTables/DataTableForQuery.js +62 -6
- package/dist/cjs/DataTables/DataTableForQuery.js.map +1 -1
- package/dist/cjs/Dialogs/BusyIndicatorDialog.js +47 -0
- package/dist/cjs/Dialogs/BusyIndicatorDialog.js.map +1 -1
- package/dist/cjs/Dialogs/Dialog.js +79 -6
- package/dist/cjs/Dialogs/Dialog.js.map +1 -1
- package/dist/cjs/Dropdown/Dropdown.js +13 -0
- package/dist/cjs/Dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/ObjectContentEditor/ObjectContentEditor.js +37 -21
- package/dist/cjs/ObjectContentEditor/ObjectContentEditor.js.map +1 -1
- package/dist/cjs/ObjectNavigationalBar/ObjectNavigationalBar.css +6 -0
- package/dist/cjs/ObjectNavigationalBar/ObjectNavigationalBar.js +14 -2
- package/dist/cjs/ObjectNavigationalBar/ObjectNavigationalBar.js.map +1 -1
- package/dist/cjs/PivotViewer/PivotViewer.css +131 -134
- package/dist/cjs/PivotViewer/PivotViewer.js +19 -0
- package/dist/cjs/PivotViewer/PivotViewer.js.map +1 -1
- package/dist/cjs/PivotViewer/components/Spinner.css +8 -8
- package/dist/cjs/SchemaEditor/NameCell.js +2 -2
- package/dist/cjs/SchemaEditor/NameCell.js.map +1 -1
- package/dist/cjs/SchemaEditor/SchemaEditor.js +15 -3
- package/dist/cjs/SchemaEditor/SchemaEditor.js.map +1 -1
- package/dist/cjs/SchemaEditor/SchemaEditor.module.css +5 -1
- package/dist/cjs/SchemaEditor/TypeCell.js +3 -3
- package/dist/cjs/SchemaEditor/TypeCell.js.map +1 -1
- package/dist/cjs/TimeMachine/EventsView.css +17 -17
- package/dist/cjs/TimeMachine/EventsView.js +13 -2
- package/dist/cjs/TimeMachine/EventsView.js.map +1 -1
- package/dist/cjs/TimeMachine/Properties.css +57 -0
- package/dist/cjs/TimeMachine/Properties.js +9 -28
- package/dist/cjs/TimeMachine/Properties.js.map +1 -1
- package/dist/cjs/TimeMachine/ReadModelView.js +10 -0
- package/dist/cjs/TimeMachine/ReadModelView.js.map +1 -1
- package/dist/cjs/TimeMachine/TimeMachine.css +38 -18
- package/dist/cjs/Toolbar/Toolbar.css +34 -17
- package/dist/cjs/Toolbar/ToolbarLayout.js +19 -20
- package/dist/cjs/Toolbar/ToolbarLayout.js.map +1 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/tailwind-utilities.css +444 -7
- package/dist/cjs/tokens.css +83 -0
- package/dist/esm/CommandDialog/CommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/CommandDialog.js +94 -4
- package/dist/esm/CommandDialog/CommandDialog.js.map +1 -1
- package/dist/esm/CommandDialog/CommandStepper.d.ts.map +1 -1
- package/dist/esm/CommandDialog/CommandStepper.js +63 -3
- package/dist/esm/CommandDialog/CommandStepper.js.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts +4 -0
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.js +95 -6
- package/dist/esm/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/esm/CommandForm/fields/CalendarField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/CalendarField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/CalendarField.js +14 -1
- package/dist/esm/CommandForm/fields/CalendarField.js.map +1 -1
- package/dist/esm/CommandForm/fields/CheckboxField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/CheckboxField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/CheckboxField.js +10 -1
- package/dist/esm/CommandForm/fields/CheckboxField.js.map +1 -1
- package/dist/esm/CommandForm/fields/ChipsField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/ChipsField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/ChipsField.js +11 -1
- package/dist/esm/CommandForm/fields/ChipsField.js.map +1 -1
- package/dist/esm/CommandForm/fields/ColorPickerField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/ColorPickerField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/ColorPickerField.js +17 -1
- package/dist/esm/CommandForm/fields/ColorPickerField.js.map +1 -1
- package/dist/esm/CommandForm/fields/DropdownField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/DropdownField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/DropdownField.js +16 -1
- package/dist/esm/CommandForm/fields/DropdownField.js.map +1 -1
- package/dist/esm/CommandForm/fields/InputTextField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/InputTextField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/InputTextField.js +41 -1
- package/dist/esm/CommandForm/fields/InputTextField.js.map +1 -1
- package/dist/esm/CommandForm/fields/MultiSelectField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/MultiSelectField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/MultiSelectField.js +13 -1
- package/dist/esm/CommandForm/fields/MultiSelectField.js.map +1 -1
- package/dist/esm/CommandForm/fields/NumberField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/NumberField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/NumberField.js +11 -1
- package/dist/esm/CommandForm/fields/NumberField.js.map +1 -1
- package/dist/esm/CommandForm/fields/RadioButtonField.d.ts +17 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.d.ts.map +1 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.js +21 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.js.map +1 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.d.ts +19 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.d.ts.map +1 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.js +38 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.js.map +1 -0
- package/dist/esm/CommandForm/fields/SliderField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/SliderField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/SliderField.js +10 -1
- package/dist/esm/CommandForm/fields/SliderField.js.map +1 -1
- package/dist/esm/CommandForm/fields/TextAreaField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/TextAreaField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/TextAreaField.js +12 -1
- package/dist/esm/CommandForm/fields/TextAreaField.js.map +1 -1
- package/dist/esm/CommandForm/fields/index.d.ts +2 -0
- package/dist/esm/CommandForm/fields/index.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/index.js +2 -0
- package/dist/esm/CommandForm/fields/index.js.map +1 -1
- package/dist/esm/CommandForm/index.js +2 -0
- package/dist/esm/CommandForm/index.js.map +1 -1
- package/dist/esm/Common/CratisComponentsProvider.d.ts +11 -0
- package/dist/esm/Common/CratisComponentsProvider.d.ts.map +1 -0
- package/dist/esm/Common/CratisComponentsProvider.js +40 -0
- package/dist/esm/Common/CratisComponentsProvider.js.map +1 -0
- package/dist/esm/Common/ErrorBoundary.d.ts.map +1 -1
- package/dist/esm/Common/ErrorBoundary.js +32 -0
- package/dist/esm/Common/ErrorBoundary.js.map +1 -1
- package/dist/esm/Common/FormElement.css +26 -0
- package/dist/esm/Common/FormElement.d.ts +1 -0
- package/dist/esm/Common/FormElement.d.ts.map +1 -1
- package/dist/esm/Common/FormElement.js +14 -1
- package/dist/esm/Common/FormElement.js.map +1 -1
- package/dist/esm/Common/Page.d.ts.map +1 -1
- package/dist/esm/Common/Page.js +13 -0
- package/dist/esm/Common/Page.js.map +1 -1
- package/dist/esm/Common/Tooltip.css +3 -3
- package/dist/esm/Common/index.d.ts +1 -0
- package/dist/esm/Common/index.d.ts.map +1 -1
- package/dist/esm/Common/index.js +1 -0
- package/dist/esm/Common/index.js.map +1 -1
- package/dist/esm/DataPage/DataPage.d.ts +12 -3
- package/dist/esm/DataPage/DataPage.d.ts.map +1 -1
- package/dist/esm/DataPage/DataPage.js +113 -8
- package/dist/esm/DataPage/DataPage.js.map +1 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.d.ts +9 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.d.ts.map +1 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.js +65 -6
- package/dist/esm/DataTables/DataTableForObservableQuery.js.map +1 -1
- package/dist/esm/DataTables/DataTableForQuery.d.ts +9 -1
- package/dist/esm/DataTables/DataTableForQuery.d.ts.map +1 -1
- package/dist/esm/DataTables/DataTableForQuery.js +62 -6
- package/dist/esm/DataTables/DataTableForQuery.js.map +1 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.d.ts.map +1 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.js +47 -0
- package/dist/esm/Dialogs/BusyIndicatorDialog.js.map +1 -1
- package/dist/esm/Dialogs/Dialog.d.ts +5 -1
- package/dist/esm/Dialogs/Dialog.d.ts.map +1 -1
- package/dist/esm/Dialogs/Dialog.js +79 -6
- package/dist/esm/Dialogs/Dialog.js.map +1 -1
- package/dist/esm/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/Dropdown/Dropdown.js +13 -0
- package/dist/esm/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.d.ts +2 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.d.ts.map +1 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.js +37 -21
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.js.map +1 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.css +6 -0
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.d.ts +3 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.d.ts.map +1 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.js +14 -2
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.js.map +1 -1
- package/dist/esm/PivotViewer/PivotViewer.css +131 -134
- package/dist/esm/PivotViewer/PivotViewer.d.ts.map +1 -1
- package/dist/esm/PivotViewer/PivotViewer.js +19 -0
- package/dist/esm/PivotViewer/PivotViewer.js.map +1 -1
- package/dist/esm/PivotViewer/components/Spinner.css +8 -8
- package/dist/esm/SchemaEditor/NameCell.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/NameCell.js +2 -2
- package/dist/esm/SchemaEditor/NameCell.js.map +1 -1
- package/dist/esm/SchemaEditor/SchemaEditor.d.ts +2 -1
- package/dist/esm/SchemaEditor/SchemaEditor.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/SchemaEditor.js +15 -3
- package/dist/esm/SchemaEditor/SchemaEditor.js.map +1 -1
- package/dist/esm/SchemaEditor/SchemaEditor.module.css +5 -1
- package/dist/esm/SchemaEditor/TypeCell.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/TypeCell.js +3 -3
- package/dist/esm/SchemaEditor/TypeCell.js.map +1 -1
- package/dist/esm/TimeMachine/EventsView.css +17 -17
- package/dist/esm/TimeMachine/EventsView.d.ts +5 -0
- package/dist/esm/TimeMachine/EventsView.d.ts.map +1 -1
- package/dist/esm/TimeMachine/EventsView.js +13 -2
- package/dist/esm/TimeMachine/EventsView.js.map +1 -1
- package/dist/esm/TimeMachine/Properties.css +57 -0
- package/dist/esm/TimeMachine/Properties.d.ts +1 -0
- package/dist/esm/TimeMachine/Properties.d.ts.map +1 -1
- package/dist/esm/TimeMachine/Properties.js +9 -28
- package/dist/esm/TimeMachine/Properties.js.map +1 -1
- package/dist/esm/TimeMachine/ReadModelView.d.ts.map +1 -1
- package/dist/esm/TimeMachine/ReadModelView.js +10 -0
- package/dist/esm/TimeMachine/ReadModelView.js.map +1 -1
- package/dist/esm/TimeMachine/TimeMachine.css +38 -18
- package/dist/esm/Toolbar/Toolbar.css +34 -17
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts +1 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarLayout.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarLayout.js +20 -21
- package/dist/esm/Toolbar/ToolbarLayout.js.map +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/tailwind-utilities.css +444 -7
- package/dist/esm/tokens.css +83 -0
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +53 -25
- package/dist/esm/CommandDialog/CommandDialog.stories.d.ts +0 -21
- package/dist/esm/CommandDialog/CommandDialog.stories.d.ts.map +0 -1
- package/dist/esm/CommandDialog/CommandDialog.stories.js +0 -353
- package/dist/esm/CommandDialog/CommandDialog.stories.js.map +0 -1
- package/dist/esm/CommandDialog/CommandStepper.stories.d.ts +0 -11
- package/dist/esm/CommandDialog/CommandStepper.stories.d.ts.map +0 -1
- package/dist/esm/CommandDialog/CommandStepper.stories.js +0 -84
- package/dist/esm/CommandDialog/CommandStepper.stories.js.map +0 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.d.ts +0 -12
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.d.ts.map +0 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.js +0 -158
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.js.map +0 -1
- package/dist/esm/CommandForm/fields/Fields.stories.d.ts +0 -17
- package/dist/esm/CommandForm/fields/Fields.stories.d.ts.map +0 -1
- package/dist/esm/CommandForm/fields/Fields.stories.js +0 -179
- package/dist/esm/CommandForm/fields/Fields.stories.js.map +0 -1
- package/dist/esm/Common/ErrorBoundary.stories.d.ts +0 -8
- package/dist/esm/Common/ErrorBoundary.stories.d.ts.map +0 -1
- package/dist/esm/Common/ErrorBoundary.stories.js +0 -22
- package/dist/esm/Common/ErrorBoundary.stories.js.map +0 -1
- package/dist/esm/Common/FormElement.stories.d.ts +0 -9
- package/dist/esm/Common/FormElement.stories.d.ts.map +0 -1
- package/dist/esm/Common/FormElement.stories.js +0 -27
- package/dist/esm/Common/FormElement.stories.js.map +0 -1
- package/dist/esm/Common/Icon.stories.d.ts +0 -11
- package/dist/esm/Common/Icon.stories.d.ts.map +0 -1
- package/dist/esm/Common/Icon.stories.js +0 -26
- package/dist/esm/Common/Icon.stories.js.map +0 -1
- package/dist/esm/Common/Page.stories.d.ts +0 -10
- package/dist/esm/Common/Page.stories.d.ts.map +0 -1
- package/dist/esm/Common/Page.stories.js +0 -35
- package/dist/esm/Common/Page.stories.js.map +0 -1
- package/dist/esm/DataPage/DataPage.stories.d.ts +0 -10
- package/dist/esm/DataPage/DataPage.stories.d.ts.map +0 -1
- package/dist/esm/DataPage/DataPage.stories.js +0 -69
- package/dist/esm/DataPage/DataPage.stories.js.map +0 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts +0 -8
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts.map +0 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.js +0 -79
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.js.map +0 -1
- package/dist/esm/DataTables/DataTableForQuery.stories.d.ts +0 -8
- package/dist/esm/DataTables/DataTableForQuery.stories.d.ts.map +0 -1
- package/dist/esm/DataTables/DataTableForQuery.stories.js +0 -54
- package/dist/esm/DataTables/DataTableForQuery.stories.js.map +0 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.d.ts +0 -7
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.d.ts.map +0 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.js +0 -15
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.js.map +0 -1
- package/dist/esm/Dialogs/ConfirmationDialog.stories.d.ts +0 -7
- package/dist/esm/Dialogs/ConfirmationDialog.stories.d.ts.map +0 -1
- package/dist/esm/Dialogs/ConfirmationDialog.stories.js +0 -20
- package/dist/esm/Dialogs/ConfirmationDialog.stories.js.map +0 -1
- package/dist/esm/Dialogs/Dialog.stories.d.ts +0 -13
- package/dist/esm/Dialogs/Dialog.stories.d.ts.map +0 -1
- package/dist/esm/Dialogs/Dialog.stories.js +0 -85
- package/dist/esm/Dialogs/Dialog.stories.js.map +0 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.d.ts +0 -12
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.d.ts.map +0 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.js +0 -184
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.js.map +0 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.d.ts +0 -10
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.d.ts.map +0 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.js +0 -45
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.js.map +0 -1
- package/dist/esm/PivotViewer/PivotViewer.stories.d.ts +0 -8
- package/dist/esm/PivotViewer/PivotViewer.stories.d.ts.map +0 -1
- package/dist/esm/PivotViewer/PivotViewer.stories.js +0 -233
- package/dist/esm/PivotViewer/PivotViewer.stories.js.map +0 -1
- package/dist/esm/SchemaEditor/SchemaEditor.stories.d.ts +0 -12
- package/dist/esm/SchemaEditor/SchemaEditor.stories.d.ts.map +0 -1
- package/dist/esm/SchemaEditor/SchemaEditor.stories.js +0 -157
- package/dist/esm/SchemaEditor/SchemaEditor.stories.js.map +0 -1
- package/dist/esm/TimeMachine/EventsView.stories.d.ts +0 -9
- package/dist/esm/TimeMachine/EventsView.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/EventsView.stories.js +0 -82
- package/dist/esm/TimeMachine/EventsView.stories.js.map +0 -1
- package/dist/esm/TimeMachine/Properties.stories.d.ts +0 -10
- package/dist/esm/TimeMachine/Properties.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/Properties.stories.js +0 -51
- package/dist/esm/TimeMachine/Properties.stories.js.map +0 -1
- package/dist/esm/TimeMachine/ReadModelView.stories.d.ts +0 -8
- package/dist/esm/TimeMachine/ReadModelView.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/ReadModelView.stories.js +0 -80
- package/dist/esm/TimeMachine/ReadModelView.stories.js.map +0 -1
- package/dist/esm/TimeMachine/TimeMachine.stories.d.ts +0 -9
- package/dist/esm/TimeMachine/TimeMachine.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/TimeMachine.stories.js +0 -115
- package/dist/esm/TimeMachine/TimeMachine.stories.js.map +0 -1
- package/dist/esm/Toolbar/Toolbar.stories.d.ts +0 -26
- package/dist/esm/Toolbar/Toolbar.stories.d.ts.map +0 -1
- package/dist/esm/Toolbar/Toolbar.stories.js +0 -240
- package/dist/esm/Toolbar/Toolbar.stories.js.map +0 -1
- package/dist/esm/given.d.ts +0 -5
- package/dist/esm/given.d.ts.map +0 -1
- package/dist/esm/given.js +0 -7
- package/dist/esm/given.js.map +0 -1
|
@@ -7,9 +7,68 @@ import { useState, useRef, useEffect } from 'react';
|
|
|
7
7
|
|
|
8
8
|
const paging = new Paging(0, 20);
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* A paged data table bound to a Cratis Arc **observable** query
|
|
11
|
+
* (`IObservableQueryFor<TDataType, TArguments>`). Subscribes via
|
|
12
|
+
* `useObservableQueryWithPaging` from `@cratis/arc.react/queries`, which
|
|
13
|
+
* opens a WebSocket connection to the backend and re-renders the table
|
|
14
|
+
* automatically whenever the underlying read model changes server-side.
|
|
15
|
+
*
|
|
16
|
+
* ## What `TQuery` is
|
|
17
|
+
*
|
|
18
|
+
* `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
|
|
19
|
+
* generator from a C# read model's static observable query method (one
|
|
20
|
+
* that returns `ISubject<TDataType>` on the backend). The proxy hooks the
|
|
21
|
+
* WebSocket subscription up; you only deal with the resulting React data.
|
|
22
|
+
*
|
|
23
|
+
* ## What's unique
|
|
24
|
+
*
|
|
25
|
+
* - **Real-time updates**: server-side projection writes flow into the
|
|
26
|
+
* table within the same render cycle, with no manual polling or refresh
|
|
27
|
+
* button. The connection re-subscribes automatically when
|
|
28
|
+
* `queryArguments` change.
|
|
29
|
+
* - **Resize-aware scrollable height**: the wrapper observes its container
|
|
30
|
+
* via `ResizeObserver` and adjusts the inner DataTable height to fit,
|
|
31
|
+
* so the table behaves correctly inside flex layouts (it never overflows
|
|
32
|
+
* beyond its parent or shrinks below 200px).
|
|
33
|
+
* - **Lazy paging + optional client filtering**: same modes as
|
|
34
|
+
* {@link DataTableForQuery}, but the page is re-issued through the
|
|
35
|
+
* observable subscription when the user pages.
|
|
36
|
+
*
|
|
37
|
+
* Use {@link DataTableForQuery} for snapshot queries that don't need live
|
|
38
|
+
* updates. Use {@link DataPage} for a higher-level layout that combines
|
|
39
|
+
* this table with a menubar, selection, and a details pane.
|
|
40
|
+
*
|
|
41
|
+
* ## Children
|
|
42
|
+
*
|
|
43
|
+
* Children are PrimeReact `<Column>` elements — same as
|
|
44
|
+
* {@link DataTableForQuery}.
|
|
45
|
+
*
|
|
46
|
+
* ```tsx
|
|
47
|
+
* import { DataTableForObservableQuery } from '@cratis/components/DataTables';
|
|
48
|
+
* import { Column } from 'primereact/column';
|
|
49
|
+
* import { ActiveSessions } from './ActiveSessions'; // proxy from C#
|
|
50
|
+
*
|
|
51
|
+
* <DataTableForObservableQuery
|
|
52
|
+
* query={ActiveSessions}
|
|
53
|
+
* emptyMessage="No active sessions">
|
|
54
|
+
* <Column field="userName" header="User" />
|
|
55
|
+
* <Column field="startedAt" header="Started" />
|
|
56
|
+
* </DataTableForObservableQuery>
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
* Rows appear and disappear in this table as users log in / log out
|
|
60
|
+
* server-side — no manual refresh required.
|
|
61
|
+
*
|
|
62
|
+
* ## Styling
|
|
63
|
+
*
|
|
64
|
+
* Identical to {@link DataTableForQuery}: `pt` / `ptOptions` / `unstyled` /
|
|
65
|
+
* `className` target the inner DataTable; `paginatorPt` and friends target
|
|
66
|
+
* the inner Paginator. See [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
|
|
67
|
+
*
|
|
68
|
+
* @typeParam TQuery - The observable query class (proxy generated from C# `IObservableQueryFor`).
|
|
69
|
+
* @typeParam TDataType - The row type returned by the query.
|
|
70
|
+
* @typeParam TArguments - The query's argument object type.
|
|
71
|
+
* @param props - {@link DataTableForObservableQueryProps}.
|
|
13
72
|
*/
|
|
14
73
|
const DataTableForObservableQuery = (props) => {
|
|
15
74
|
const [filters, setFilters] = useState(props.defaultFilters ?? {});
|
|
@@ -56,8 +115,8 @@ const DataTableForObservableQuery = (props) => {
|
|
|
56
115
|
display: 'flex',
|
|
57
116
|
flexDirection: 'column',
|
|
58
117
|
height: '100%',
|
|
59
|
-
border: '1px solid var(--surface-border)',
|
|
60
|
-
borderRadius: 'var(--border-radius)',
|
|
118
|
+
border: '1px solid var(--cratis-surface-border)',
|
|
119
|
+
borderRadius: 'var(--cratis-border-radius)',
|
|
61
120
|
overflow: 'hidden'
|
|
62
121
|
}, children: [jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, scrollable: true, scrollHeight: '100%', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
|
|
63
122
|
setFilters(e.filters);
|
|
@@ -65,7 +124,7 @@ const DataTableForObservableQuery = (props) => {
|
|
|
65
124
|
const filteredValue = e.filteredValue;
|
|
66
125
|
setFilteredTotal(filteredValue ? filteredValue.length : undefined);
|
|
67
126
|
}
|
|
68
|
-
}, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
|
|
127
|
+
}, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, className: props.className, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--cratis-surface-border)' }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page), pt: props.paginatorPt, ptOptions: props.paginatorPtOptions, unstyled: props.paginatorUnstyled }) }))] }));
|
|
69
128
|
};
|
|
70
129
|
|
|
71
130
|
export { DataTableForObservableQuery };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
|
|
1
|
+
import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent, type DataTableProps as PrimeDataTableProps } from 'primereact/datatable';
|
|
2
|
+
import { type PaginatorProps } from 'primereact/paginator';
|
|
2
3
|
import { Constructor } from '@cratis/fundamentals';
|
|
3
4
|
import { IQueryFor } from '@cratis/arc/queries';
|
|
4
5
|
import { ReactNode } from 'react';
|
|
@@ -13,6 +14,13 @@ export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArg
|
|
|
13
14
|
globalFilterFields?: string[] | undefined;
|
|
14
15
|
defaultFilters?: DataTableFilterMeta;
|
|
15
16
|
clientFiltering?: boolean;
|
|
17
|
+
className?: string;
|
|
18
|
+
pt?: PrimeDataTableProps<TDataType[]>['pt'];
|
|
19
|
+
ptOptions?: PrimeDataTableProps<TDataType[]>['ptOptions'];
|
|
20
|
+
unstyled?: boolean;
|
|
21
|
+
paginatorPt?: PaginatorProps['pt'];
|
|
22
|
+
paginatorPtOptions?: PaginatorProps['ptOptions'];
|
|
23
|
+
paginatorUnstyled?: boolean;
|
|
16
24
|
}
|
|
17
25
|
export declare const DataTableForQuery: <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => import("react/jsx-runtime").JSX.Element;
|
|
18
26
|
//# sourceMappingURL=DataTableForQuery.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableForQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableForQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,KAAK,cAAc,IAAI,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACvJ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAU,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AASpD,MAAM,WAAW,sBAAsB,CAAC,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAIxI,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,mBAAmB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,mBAAmB,CAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;IAG1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,WAAW,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAGnC,kBAAkB,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAGjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAiED,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,sBAAsB,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CAgEnM,CAAC"}
|
|
@@ -7,9 +7,65 @@ import { useState, useRef } from 'react';
|
|
|
7
7
|
|
|
8
8
|
const paging = new Paging(0, 20);
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* A paged data table bound to a snapshot Cratis Arc query
|
|
11
|
+
* (`IQueryFor<TDataType, TArguments>`). Subscribes via
|
|
12
|
+
* `useQueryWithPaging` from `@cratis/arc.react/queries`, renders the result
|
|
13
|
+
* page in a PrimeReact `DataTable`, and shows a `Paginator` when the result
|
|
14
|
+
* set exceeds one page.
|
|
15
|
+
*
|
|
16
|
+
* ## What `TQuery` is
|
|
17
|
+
*
|
|
18
|
+
* `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
|
|
19
|
+
* generator from a C# read model's static query method. `dotnet build`
|
|
20
|
+
* writes a `.ts` file per query with the right return type and a `use()`
|
|
21
|
+
* hook; importing the class is all the connection-to-the-backend you need.
|
|
22
|
+
*
|
|
23
|
+
* ## What's unique
|
|
24
|
+
*
|
|
25
|
+
* - **Lazy paging**: the table runs in PrimeReact's `lazy` mode by default
|
|
26
|
+
* so the server returns one page at a time. The Paginator's
|
|
27
|
+
* `onPageChange` calls back into the Arc hook to fetch the next page.
|
|
28
|
+
* - **Client-side filtering toggle**: pass `clientFiltering` to keep the
|
|
29
|
+
* page-fetched rows in the browser and filter locally — useful for
|
|
30
|
+
* small result sets where you want PrimeReact's filter UI but don't want
|
|
31
|
+
* to round-trip every keystroke.
|
|
32
|
+
* - **Default filter state**: `defaultFilters` seeds the table's filter
|
|
33
|
+
* meta on first render so saved or URL-encoded filter state can be
|
|
34
|
+
* rehydrated.
|
|
35
|
+
*
|
|
36
|
+
* Use {@link DataTableForObservableQuery} for queries that should update in
|
|
37
|
+
* real time as the underlying read model changes server-side. Use
|
|
38
|
+
* {@link DataPage} for a higher-level layout that combines this table with
|
|
39
|
+
* a menubar, selection, and a details pane.
|
|
40
|
+
*
|
|
41
|
+
* ## Children
|
|
42
|
+
*
|
|
43
|
+
* Children are PrimeReact `<Column>` elements describing the visible
|
|
44
|
+
* columns — sorting, filtering, custom body templates, everything
|
|
45
|
+
* PrimeReact's `<Column>` supports.
|
|
46
|
+
*
|
|
47
|
+
* ```tsx
|
|
48
|
+
* import { DataTableForQuery } from '@cratis/components/DataTables';
|
|
49
|
+
* import { Column } from 'primereact/column';
|
|
50
|
+
* import { AllAuthors } from './AllAuthors'; // proxy from C#
|
|
51
|
+
*
|
|
52
|
+
* <DataTableForQuery query={AllAuthors} emptyMessage="No authors">
|
|
53
|
+
* <Column field="name" header="Name" sortable />
|
|
54
|
+
* <Column field="email" header="Email" />
|
|
55
|
+
* </DataTableForQuery>
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* ## Styling
|
|
59
|
+
*
|
|
60
|
+
* Forward `pt` / `ptOptions` / `unstyled` / `className` to the underlying
|
|
61
|
+
* PrimeReact DataTable. Use `paginatorPt` / `paginatorPtOptions` /
|
|
62
|
+
* `paginatorUnstyled` to style the inner Paginator independently. See
|
|
63
|
+
* [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
|
|
64
|
+
*
|
|
65
|
+
* @typeParam TQuery - The query class (proxy generated from C# `IQueryFor`).
|
|
66
|
+
* @typeParam TDataType - The row type returned by the query.
|
|
67
|
+
* @typeParam TArguments - The query's argument object type.
|
|
68
|
+
* @param props - {@link DataTableForQueryProps}.
|
|
13
69
|
*/
|
|
14
70
|
const DataTableForQuery = (props) => {
|
|
15
71
|
const [filters, setFilters] = useState(props.defaultFilters ?? {});
|
|
@@ -22,8 +78,8 @@ const DataTableForQuery = (props) => {
|
|
|
22
78
|
display: 'flex',
|
|
23
79
|
flexDirection: 'column',
|
|
24
80
|
height: '100%',
|
|
25
|
-
border: '1px solid var(--surface-border)',
|
|
26
|
-
borderRadius: 'var(--border-radius)',
|
|
81
|
+
border: '1px solid var(--cratis-surface-border)',
|
|
82
|
+
borderRadius: 'var(--cratis-border-radius)',
|
|
27
83
|
overflow: 'hidden'
|
|
28
84
|
}, children: [jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
|
|
29
85
|
setFilters(e.filters);
|
|
@@ -31,7 +87,7 @@ const DataTableForQuery = (props) => {
|
|
|
31
87
|
const filteredValue = e.filteredValue;
|
|
32
88
|
setFilteredTotal(filteredValue ? filteredValue.length : undefined);
|
|
33
89
|
}
|
|
34
|
-
}, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, style: { minWidth: '100%' }, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)', flexShrink: 0 }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
|
|
90
|
+
}, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, style: { minWidth: '100%' }, className: props.className, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--cratis-surface-border)', flexShrink: 0 }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page), pt: props.paginatorPt, ptOptions: props.paginatorPtOptions, unstyled: props.paginatorUnstyled }) }))] }));
|
|
35
91
|
};
|
|
36
92
|
|
|
37
93
|
export { DataTableForQuery };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableForQuery.js","sources":["../../../DataTables/DataTableForQuery.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"DataTableForQuery.js","sources":["../../../DataTables/DataTableForQuery.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BusyIndicatorDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"BusyIndicatorDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAmDvE,eAAO,MAAM,mBAAmB,GAAI,OAAO,0BAA0B,4CAgBpE,CAAC"}
|
|
@@ -2,6 +2,53 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { ProgressSpinner } from 'primereact/progressspinner';
|
|
3
3
|
import { Dialog } from './Dialog.js';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Modal "busy" dialog used by the `@cratis/arc.react` dialog host whenever a
|
|
7
|
+
* long-running operation needs to block user interaction. Renders a spinner
|
|
8
|
+
* and a message, with no confirm/cancel/X buttons — the dialog dismisses
|
|
9
|
+
* itself when the host removes it.
|
|
10
|
+
*
|
|
11
|
+
* ## How to use it
|
|
12
|
+
*
|
|
13
|
+
* **You do not instantiate this component directly.** It's rendered by the
|
|
14
|
+
* dialog host machinery in response to a request. Trigger one from anywhere
|
|
15
|
+
* in your tree by calling the host's `showBusyIndicator` helper:
|
|
16
|
+
*
|
|
17
|
+
* ```tsx
|
|
18
|
+
* import { useDialogs } from '@cratis/arc.react/dialogs';
|
|
19
|
+
*
|
|
20
|
+
* const Save = () => {
|
|
21
|
+
* const { showBusyIndicator, hideBusyIndicator } = useDialogs();
|
|
22
|
+
*
|
|
23
|
+
* const onSave = async () => {
|
|
24
|
+
* showBusyIndicator({ title: 'Saving', message: 'Persisting your changes…' });
|
|
25
|
+
* try {
|
|
26
|
+
* await someLongRunningCommand.execute();
|
|
27
|
+
* } finally {
|
|
28
|
+
* hideBusyIndicator();
|
|
29
|
+
* }
|
|
30
|
+
* };
|
|
31
|
+
*
|
|
32
|
+
* return <Button label="Save" onClick={onSave} />;
|
|
33
|
+
* };
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* The host renders the BusyIndicatorDialog in response, threading the
|
|
37
|
+
* `title` / `message` from your request through to the rendered modal.
|
|
38
|
+
*
|
|
39
|
+
* ## What's unique
|
|
40
|
+
*
|
|
41
|
+
* - **No interactive buttons.** A busy indicator is a wait-state, not a
|
|
42
|
+
* confirmation prompt. The dialog has no Ok / Cancel / X — only the host
|
|
43
|
+
* can dismiss it.
|
|
44
|
+
* - **No per-instance pass-through.** The request type
|
|
45
|
+
* ({@link BusyIndicatorDialogRequest}) is owned by `@cratis/arc.react`, so
|
|
46
|
+
* `pt` / `unstyled` are not exposed on a per-call basis. Restyle the
|
|
47
|
+
* busy dialog (and every dialog) via the global `pt` preset on
|
|
48
|
+
* `CratisComponentsProvider`.
|
|
49
|
+
*
|
|
50
|
+
* @param props - The request from the dialog host, containing `title` and `message`.
|
|
51
|
+
*/
|
|
5
52
|
const BusyIndicatorDialog = (props) => {
|
|
6
53
|
return (jsx(Dialog, { title: props.title, visible: true, onCancel: () => undefined, buttons: null, children: jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-4", children: [jsx(ProgressSpinner, {}), jsx("p", { className: "m-0 text-center", children: props.message })] }) }));
|
|
7
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CG;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAiC,KAAI;IACrE,QACIA,IAAC,MAAM,EAAA,EACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,MAAM,SAAS,EACzB,OAAO,EAAE,IAAI,EAAA,QAAA,EAEbC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sDAAsD,aACjED,GAAA,CAAC,eAAe,KAAG,EACnBA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,iBAAiB,YACzB,KAAK,CAAC,OAAO,EAAA,CACd,CAAA,EAAA,CACF,EAAA,CACD;AAEjB;;;;"}
|
|
@@ -22,6 +22,10 @@ export interface DialogProps {
|
|
|
22
22
|
cancelLabel?: string;
|
|
23
23
|
yesLabel?: string;
|
|
24
24
|
noLabel?: string;
|
|
25
|
+
className?: string;
|
|
26
|
+
pt?: PrimeDialogProps['pt'];
|
|
27
|
+
ptOptions?: PrimeDialogProps['ptOptions'];
|
|
28
|
+
unstyled?: boolean;
|
|
25
29
|
}
|
|
26
|
-
export declare const Dialog: ({ title, visible, onClose, onConfirm, onCancel, buttons, children, width, style, contentStyle, resizable, isValid, isBusy, okLabel, cancelLabel, yesLabel, noLabel }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const Dialog: ({ title, visible, onClose, onConfirm, onCancel, buttons, children, width, style, contentStyle, resizable, isValid, isBusy, okLabel, cancelLabel, yesLabel, noLabel, className, pt, ptOptions, unstyled }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
31
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyB,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAoB,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyB,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAoB,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAOtG,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAMtF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAKrF,MAAM,WAAW,WAAW;IAExB,KAAK,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,SAAS,CAAC,EAAE,eAAe,CAAC;IAG5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAQ1B,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAGpC,QAAQ,EAAE,SAAS,CAAC;IAGpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAGlC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAGhD,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAKjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAQnB,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAM5B,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAO1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AA0ED,eAAO,MAAM,MAAM,GAAI,0MAsBpB,WAAW,4CAuHb,CAAC"}
|
|
@@ -3,19 +3,92 @@ import { Dialog as Dialog$1 } from 'primereact/dialog';
|
|
|
3
3
|
import { Button } from 'primereact/button';
|
|
4
4
|
import { useDialogContext, DialogResult, DialogButtons } from '@cratis/arc.react/dialogs';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Cratis wrapper around PrimeReact's `Dialog` that adds the surface every Arc
|
|
8
|
+
* app needs on top of PrimeReact's bare modal:
|
|
9
|
+
*
|
|
10
|
+
* - **Typed footer-button enum** (`DialogButtons.Ok` / `OkCancel` / `YesNo` /
|
|
11
|
+
* `YesNoCancel`) with localizable labels. Pass `null` for a footer-less
|
|
12
|
+
* dialog with your own buttons, or a `ReactNode` to fully render the
|
|
13
|
+
* footer yourself.
|
|
14
|
+
* - **Confirm/cancel callback contract** (`onConfirm`, `onCancel`, `onClose`)
|
|
15
|
+
* where returning `false` (sync or via promise) keeps the dialog open.
|
|
16
|
+
* This is the contract used to surface inline command failures: when a
|
|
17
|
+
* command's `execute()` returns `IsSuccess: false`, the dialog stays open
|
|
18
|
+
* and the form re-renders with field-level errors.
|
|
19
|
+
* - **Busy state** (`isBusy`) that disables every action and shows a loading
|
|
20
|
+
* spinner on the confirm button. Command-executing wrappers
|
|
21
|
+
* ({@link CommandDialog}, {@link StepperCommandDialog}) flip this
|
|
22
|
+
* automatically while a command runs.
|
|
23
|
+
* - **Validity gate** (`isValid`) that disables the confirm button without
|
|
24
|
+
* disabling the cancel button. Used by command-executing wrappers to
|
|
25
|
+
* block submission while form validation fails.
|
|
26
|
+
*
|
|
27
|
+
* ## Arc dialog host integration
|
|
28
|
+
*
|
|
29
|
+
* When mounted inside a `<DialogHost>` from `@cratis/arc.react/dialogs`, the
|
|
30
|
+
* Dialog automatically discovers the host through `useDialogContext()` and
|
|
31
|
+
* closes through it on confirm/cancel — no manual `closeDialog` wiring at
|
|
32
|
+
* the call site. The typical pattern at the host's request site:
|
|
33
|
+
*
|
|
34
|
+
* ```tsx
|
|
35
|
+
* import { useDialog, DialogResult } from '@cratis/arc.react/dialogs';
|
|
36
|
+
*
|
|
37
|
+
* const [DeleteProjectDialog, showDeleteProjectDialog] = useDialog(DeleteProject);
|
|
38
|
+
*
|
|
39
|
+
* const onDeleteClick = async () => {
|
|
40
|
+
* const [result] = await showDeleteProjectDialog();
|
|
41
|
+
* if (result === DialogResult.Yes) {
|
|
42
|
+
* // user confirmed
|
|
43
|
+
* }
|
|
44
|
+
* };
|
|
45
|
+
* ```
|
|
46
|
+
*
|
|
47
|
+
* Inside the dialog component itself the close path goes through
|
|
48
|
+
* `useDialogContext()`:
|
|
49
|
+
*
|
|
50
|
+
* ```tsx
|
|
51
|
+
* import { Dialog, DialogButtons, DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
|
|
52
|
+
*
|
|
53
|
+
* export const DeleteProject = () => {
|
|
54
|
+
* const { closeDialog } = useDialogContext();
|
|
55
|
+
* return (
|
|
56
|
+
* <Dialog title="Delete project?" buttons={DialogButtons.YesNo}
|
|
57
|
+
* onConfirm={() => closeDialog(DialogResult.Yes)}
|
|
58
|
+
* onCancel={() => closeDialog(DialogResult.No)}>
|
|
59
|
+
* This action cannot be undone.
|
|
60
|
+
* </Dialog>
|
|
61
|
+
* );
|
|
62
|
+
* };
|
|
63
|
+
* ```
|
|
64
|
+
*
|
|
65
|
+
* The Dialog also works **outside** a host — the `useDialogContext()` call is
|
|
66
|
+
* wrapped in a try/catch so standalone use does not throw.
|
|
67
|
+
*
|
|
68
|
+
* ## Styling
|
|
69
|
+
*
|
|
70
|
+
* Pass `pt`, `ptOptions`, `unstyled`, or `className` to forward straight to
|
|
71
|
+
* the underlying PrimeReact Dialog. See the [Styling section](../../Documentation/Styling/index.md)
|
|
72
|
+
* for the supported styling options and the
|
|
73
|
+
* [pass-through cheat sheet](../../Documentation/Styling/pass-through.md)
|
|
74
|
+
* for available slots.
|
|
75
|
+
*
|
|
76
|
+
* @param props - {@link DialogProps}.
|
|
77
|
+
*/
|
|
78
|
+
const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons = DialogButtons.OkCancel, children, width = '450px', style, contentStyle, resizable = false, isValid, isBusy = false, okLabel = 'Ok', cancelLabel = 'Cancel', yesLabel = 'Yes', noLabel = 'No', className, pt, ptOptions, unstyled }) => {
|
|
79
|
+
// useDialogContext() is called unconditionally on every render — the try/catch only suppresses
|
|
80
|
+
// the exception when Dialog is used standalone (outside a provider). React's Rules of Hooks
|
|
81
|
+
// are not violated because the hook is always called; the try/catch never skips the call.
|
|
8
82
|
let contextCloseDialog;
|
|
9
83
|
try {
|
|
10
84
|
const context = useDialogContext();
|
|
11
85
|
contextCloseDialog = context?.closeDialog;
|
|
12
86
|
}
|
|
13
87
|
catch {
|
|
14
|
-
// No context available - dialog is being used standalone
|
|
15
88
|
contextCloseDialog = undefined;
|
|
16
89
|
}
|
|
17
90
|
const isDialogValid = isValid !== false;
|
|
18
|
-
const headerElement = (jsx("div", { className: "inline-flex
|
|
91
|
+
const headerElement = (jsx("div", { className: "inline-flex items-center justify-center gap-2", children: jsx("span", { className: "font-bold whitespace-nowrap", children: title }) }));
|
|
19
92
|
const handleClose = async (result) => {
|
|
20
93
|
let shouldCloseThroughContext = true;
|
|
21
94
|
if (result === DialogResult.Ok || result === DialogResult.Yes) {
|
|
@@ -64,10 +137,10 @@ const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons =
|
|
|
64
137
|
}
|
|
65
138
|
return (jsx(Fragment, {}));
|
|
66
139
|
};
|
|
67
|
-
const footer = (jsx("div", { className: "flex flex-wrap justify-
|
|
140
|
+
const footer = (jsx("div", { className: "flex flex-wrap justify-start gap-3", children: getFooterInterior() }));
|
|
68
141
|
return (jsx(Dialog$1, { header: headerElement, modal: true, footer: footer,
|
|
69
142
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
70
|
-
onHide: typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => { }, visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: typeof buttons === 'number', children: children }));
|
|
143
|
+
onHide: typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => { }, visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: typeof buttons === 'number', className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
|
|
71
144
|
};
|
|
72
145
|
|
|
73
146
|
export { Dialog };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../Dialogs/Dialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment","PrimeDialog"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../Dialogs/Dialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment","PrimeDialog"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOrG,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC;AAe/C,eAAO,MAAM,QAAQ,0FAWnB,CAAC"}
|
|
@@ -3,6 +3,19 @@ import React from 'react';
|
|
|
3
3
|
import { Dropdown as Dropdown$1 } from 'primereact/dropdown';
|
|
4
4
|
import { useOverlayZIndex } from '../useOverlayZIndex.js';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Thin wrapper around PrimeReact's `Dropdown` that fixes two ergonomic
|
|
8
|
+
* issues for Cratis apps:
|
|
9
|
+
*
|
|
10
|
+
* - Defaults `appendTo` to `document.body` so dropdown panels escape parent
|
|
11
|
+
* scroll containers (a common gotcha inside dialogs and data table rows).
|
|
12
|
+
* - Forces a high z-index on the dropdown panel via {@link useOverlayZIndex}
|
|
13
|
+
* so it appears above modal dialogs.
|
|
14
|
+
*
|
|
15
|
+
* The component forwards refs and spreads all other props, so it accepts
|
|
16
|
+
* the full PrimeReact `Dropdown` API including `pt`, `ptOptions`, and
|
|
17
|
+
* `unstyled` for restyling.
|
|
18
|
+
*/
|
|
6
19
|
const Dropdown = React.forwardRef((props, ref) => {
|
|
7
20
|
// Force z-index on the dropdown panel to appear above dialogs
|
|
8
21
|
useOverlayZIndex('p-dropdown-panel');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../Dropdown/Dropdown.tsx"],"sourcesContent":[null],"names":["_jsx","PrimeDropdown"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../Dropdown/Dropdown.tsx"],"sourcesContent":[null],"names":["_jsx","PrimeDropdown"],"mappings":";;;;;AAaA;;;;;;;;;;;;AAYG;AACI,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,KAAI;;IAElF,gBAAgB,CAAC,kBAAkB,CAAC;IAEpC,QACIA,IAACC,UAAa,EAAA,EACV,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAA,CAC3C;AAEV,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -6,6 +6,7 @@ export interface ObjectContentEditorProps {
|
|
|
6
6
|
editMode?: boolean;
|
|
7
7
|
onChange?: (object: Json) => void;
|
|
8
8
|
onValidationChange?: (hasErrors: boolean) => void;
|
|
9
|
+
className?: string;
|
|
9
10
|
}
|
|
10
|
-
export declare const ObjectContentEditor: ({ object, timestamp, schema, editMode, onChange, onValidationChange }: ObjectContentEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const ObjectContentEditor: ({ object, timestamp, schema, editMode, onChange, onValidationChange, className }: ObjectContentEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
//# sourceMappingURL=ObjectContentEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectContentEditor.d.ts","sourceRoot":"","sources":["../../../ObjectContentEditor/ObjectContentEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAsB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"ObjectContentEditor.d.ts","sourceRoot":"","sources":["../../../ObjectContentEditor/ObjectContentEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAsB,MAAM,qBAAqB,CAAC;AAW3E,MAAM,WAAW,wBAAwB;IAErC,MAAM,EAAE,IAAI,CAAC;IAGb,SAAS,CAAC,EAAE,IAAI,CAAC;IAOjB,MAAM,EAAE,UAAU,CAAC;IAMnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC;IAOlC,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAOlD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAcD,eAAO,MAAM,mBAAmB,GAAI,kFAA0F,wBAAwB,4CAiarJ,CAAC"}
|