@cratis/components 1.10.2 → 2.0.1
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 +90 -4
- 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 +11 -1
- package/dist/cjs/CommandForm/fields/RadioButtonField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/RadioGroupField.js +22 -2
- package/dist/cjs/CommandForm/fields/RadioGroupField.js.map +1 -1
- 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/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 +104 -6
- 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 +74 -2
- 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 +130 -130
- 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.js +13 -2
- package/dist/cjs/TimeMachine/EventsView.js.map +1 -1
- package/dist/cjs/TimeMachine/ReadModelView.js +10 -0
- package/dist/cjs/TimeMachine/ReadModelView.js.map +1 -1
- package/dist/cjs/Toolbar/Toolbar.css +34 -17
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/tailwind-utilities.css +443 -0
- 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 +90 -4
- 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 +5 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/RadioButtonField.js +11 -1
- package/dist/esm/CommandForm/fields/RadioButtonField.js.map +1 -1
- package/dist/esm/CommandForm/fields/RadioGroupField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/RadioGroupField.js +22 -2
- package/dist/esm/CommandForm/fields/RadioGroupField.js.map +1 -1
- 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/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 +104 -6
- 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 +74 -2
- 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 +130 -130
- 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.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/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/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/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 +443 -0
- package/dist/esm/tokens.css +83 -0
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +33 -14
- 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 -19
- package/dist/esm/CommandForm/fields/Fields.stories.d.ts.map +0 -1
- package/dist/esm/CommandForm/fields/Fields.stories.js +0 -203
- 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
|
@@ -4,12 +4,32 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var radiobutton = require('primereact/radiobutton');
|
|
5
5
|
var commands = require('@cratis/arc.react/commands');
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* A radio-button group field bound to a `string` or `number` property on a
|
|
9
|
+
* Cratis Arc command. Use for small mutually-exclusive choice sets where
|
|
10
|
+
* all options should be visible at once; for larger sets, prefer
|
|
11
|
+
* {@link DropdownField}. See {@link InputTextField} for the full
|
|
12
|
+
* `value={c => c.prop}` binding model.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <RadioGroupField value={c => c.priority}
|
|
16
|
+
* options={priorityOptions}
|
|
17
|
+
* optionLabel="label"
|
|
18
|
+
* optionValue="value"
|
|
19
|
+
* layout="horizontal"
|
|
20
|
+
* title="Priority" />
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
7
23
|
const RadioGroupField = commands.asCommandFormField((props) => {
|
|
8
24
|
const layout = props.layout ?? 'vertical';
|
|
9
|
-
|
|
25
|
+
const layoutClasses = layout === 'horizontal' ? 'flex-row gap-4 flex-wrap' : 'flex-col gap-2';
|
|
26
|
+
const containerClassName = props.className
|
|
27
|
+
? `flex ${layoutClasses} ${props.className}`
|
|
28
|
+
: `flex ${layoutClasses}`;
|
|
29
|
+
return (jsxRuntime.jsx("div", { className: containerClassName, children: props.options.map((option) => {
|
|
10
30
|
const optValue = option[props.optionValue];
|
|
11
31
|
const optLabel = option[props.optionLabel];
|
|
12
|
-
return (jsxRuntime.jsxs("div", { className: "flex
|
|
32
|
+
return (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(radiobutton.RadioButton, { value: optValue, checked: props.value === optValue, onChange: (e) => props.onChange(e.value), onBlur: props.onBlur, invalid: props.invalid, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }), jsxRuntime.jsx("label", { className: "ml-2", children: optLabel })] }, String(optValue)));
|
|
13
33
|
}) }));
|
|
14
34
|
}, {
|
|
15
35
|
defaultValue: '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupField.js","sources":["../../../../CommandForm/fields/RadioGroupField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","_jsxs","RadioButton"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"RadioGroupField.js","sources":["../../../../CommandForm/fields/RadioGroupField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","_jsxs","RadioButton"],"mappings":";;;;;;AAgCA;;;;;;;;;;;;;;;AAeG;MACU,eAAe,GAAGA,2BAAkB,CAC7C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,UAAU;AACzC,IAAA,MAAM,aAAa,GAAG,MAAM,KAAK,YAAY,GAAG,0BAA0B,GAAG,gBAAgB;AAC7F,IAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC;AAC7B,UAAE,CAAA,KAAA,EAAQ,aAAa,IAAI,KAAK,CAAC,SAAS,CAAA;AAC1C,UAAE,CAAA,KAAA,EAAQ,aAAa,CAAA,CAAE;AAC7B,IAAA,QACIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,EAAA,QAAA,EAC7B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;YAC1B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAoB;YAC7D,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAW;AACpD,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAA4B,SAAS,EAAC,mBAAmB,aACrDD,cAAA,CAACE,uBAAW,EAAA,EACR,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,QAAQ,EACjC,QAAQ,EAAE,CAAC,CAAyB,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAChE,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EACFF,cAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAS,KAXpC,MAAM,CAAC,QAAQ,CAAC,CAYpB;QAEd,CAAC,CAAC,EAAA,CACA;AAEd,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}
|
|
@@ -4,7 +4,16 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var slider = require('primereact/slider');
|
|
5
5
|
var commands = require('@cratis/arc.react/commands');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* A horizontal slider field bound to a `number` property on a Cratis Arc
|
|
9
|
+
* command. The current value is rendered below the track for feedback. See
|
|
10
|
+
* {@link InputTextField} for the full `value={c => c.prop}` binding model.
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <SliderField value={c => c.volume} title="Volume" min={0} max={100} />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
const SliderField = commands.asCommandFormField((props) => (jsxRuntime.jsxs("div", { className: "w-full", onBlur: props.onBlur, children: [jsxRuntime.jsx(slider.Slider, { value: props.value, onChange: (e) => props.onChange(e.value), min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }), jsxRuntime.jsx("div", { className: "text-center mt-2", children: jsxRuntime.jsx("span", { className: "font-semibold", children: props.value }) })] })), {
|
|
8
17
|
defaultValue: 0,
|
|
9
18
|
extractValue: (e) => (typeof e === 'number' ? e : 0)
|
|
10
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderField.js","sources":["../../../../CommandForm/fields/SliderField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsxs","_jsx","Slider"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SliderField.js","sources":["../../../../CommandForm/fields/SliderField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsxs","_jsx","Slider"],"mappings":";;;;;;AAiCA;;;;;;;;AAQG;AACI,MAAM,WAAW,GAAGA,2BAAkB,CACzC,CAAC,KAAK,MACFC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,QAAA,EAAA,CACxCC,cAAA,CAACC,aAAM,EAAA,EACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EACnB,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EACFD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAC7BA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EAAA,CAClD,CAAA,EAAA,CACJ,CACT,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;;;"}
|
|
@@ -4,7 +4,18 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var inputtextarea = require('primereact/inputtextarea');
|
|
5
5
|
var commands = require('@cratis/arc.react/commands');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* A multi-line text field bound to a `string` property on a Cratis Arc
|
|
9
|
+
* command. Use for descriptions, notes, or any free-form text longer than
|
|
10
|
+
* a single line. See {@link InputTextField} for the full
|
|
11
|
+
* `value={c => c.prop}` binding model that every field in this folder
|
|
12
|
+
* follows.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <TextAreaField value={c => c.description} title="Description" rows={4} />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
const TextAreaField = commands.asCommandFormField((props) => (jsxRuntime.jsx(inputtextarea.InputTextarea, { value: props.value, onChange: props.onChange, onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, rows: props.rows ?? 5, cols: props.cols, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
|
|
8
19
|
defaultValue: '',
|
|
9
20
|
extractValue: (e) => e.target.value
|
|
10
21
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","InputTextarea"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","InputTextarea"],"mappings":";;;;;;AAiCA;;;;;;;;;;AAUG;MACU,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,cAAA,CAACC,2BAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var api = require('primereact/api');
|
|
6
|
+
var tsDeepmerge = require('ts-deepmerge');
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Default configuration applied to every consumer. Intentionally empty today —
|
|
10
|
+
* reserved for Cratis-wide opinions we may want to ship in the future (for example,
|
|
11
|
+
* a default pt preset that complements the --cratis-* token layer). Anything added
|
|
12
|
+
* here is deep-merged with the consumer's `value` so consumer settings always win.
|
|
13
|
+
*
|
|
14
|
+
* Exported so specs can verify the merge contract without re-rendering React.
|
|
15
|
+
*/
|
|
16
|
+
const cratisDefaults = {};
|
|
17
|
+
/**
|
|
18
|
+
* Pure merge of {@link cratisDefaults} and consumer-supplied config. Exposed for
|
|
19
|
+
* specs; the provider component uses the same logic inside its `useMemo`.
|
|
20
|
+
*/
|
|
21
|
+
const mergeCratisComponentsConfig = (value) => tsDeepmerge.merge(cratisDefaults, value ?? {});
|
|
22
|
+
/**
|
|
23
|
+
* Single setup point for Cratis Components. Wraps {@link PrimeReactProvider} so the
|
|
24
|
+
* library can layer Cratis-wide defaults on top of PrimeReact's pass-through and
|
|
25
|
+
* unstyled mechanisms while still letting the consumer take complete control:
|
|
26
|
+
*
|
|
27
|
+
* - Pass `unstyled: true` to disable every PrimeReact base style. The wrappers in
|
|
28
|
+
* this package then render structurally only and pick up all visuals from your
|
|
29
|
+
* own CSS, Tailwind, or pt definitions.
|
|
30
|
+
* - Pass `pt` / `ptOptions` to apply global per-component pass-through.
|
|
31
|
+
*
|
|
32
|
+
* Consumers who want to talk to PrimeReact directly may still mount
|
|
33
|
+
* {@link PrimeReactProvider} themselves — this component is an optional convenience,
|
|
34
|
+
* not a requirement.
|
|
35
|
+
*/
|
|
36
|
+
const CratisComponentsProvider = ({ value, children }) => {
|
|
37
|
+
const merged = React.useMemo(() => mergeCratisComponentsConfig(value), [value]);
|
|
38
|
+
return jsxRuntime.jsx(api.PrimeReactProvider, { value: merged, children: children });
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.CratisComponentsProvider = CratisComponentsProvider;
|
|
42
|
+
exports.cratisDefaults = cratisDefaults;
|
|
43
|
+
exports.mergeCratisComponentsConfig = mergeCratisComponentsConfig;
|
|
44
|
+
//# sourceMappingURL=CratisComponentsProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CratisComponentsProvider.js","sources":["../../../Common/CratisComponentsProvider.tsx"],"sourcesContent":[null],"names":["merge","useMemo","_jsx","PrimeReactProvider"],"mappings":";;;;;;;AAyBA;;;;;;;AAOG;AACI,MAAM,cAAc,GAA2B;AAEtD;;;AAGG;AACI,MAAM,2BAA2B,GAAG,CAAC,KAAyC,KACjFA,iBAAK,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE;AAErC;;;;;;;;;;;;;AAaG;AACI,MAAM,wBAAwB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAiC,KAAI;AAC3F,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAyB,MAAM,2BAA2B,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEjG,OAAOC,cAAA,CAACC,sBAAkB,EAAA,EAAC,KAAK,EAAE,MAAM,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAsB;AAC7E;;;;;;"}
|
|
@@ -3,14 +3,46 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* React error boundary that catches errors thrown by its descendants during
|
|
8
|
+
* render, lifecycle, and constructor calls. On error, it renders a minimal
|
|
9
|
+
* inline diagnostic (message + stack) so the rest of the application keeps
|
|
10
|
+
* working instead of crashing the whole tree.
|
|
11
|
+
*
|
|
12
|
+
* Wrap the boundary around any subtree whose failure should be isolated:
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <ErrorBoundary>
|
|
16
|
+
* <RiskyFeature />
|
|
17
|
+
* </ErrorBoundary>
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* Use one boundary per logical UI region rather than a single root-level one,
|
|
21
|
+
* so failures stay scoped to the feature that caused them.
|
|
22
|
+
*/
|
|
6
23
|
class ErrorBoundary extends React.Component {
|
|
24
|
+
/** Initial state — no error captured. */
|
|
7
25
|
state = {
|
|
8
26
|
hasError: false,
|
|
9
27
|
error: new Error(),
|
|
10
28
|
};
|
|
29
|
+
/**
|
|
30
|
+
* React lifecycle hook invoked when a descendant throws. Returns the
|
|
31
|
+
* next state, which switches the boundary into its fallback render path.
|
|
32
|
+
*
|
|
33
|
+
* @param error - The error thrown by the descendant.
|
|
34
|
+
*/
|
|
11
35
|
static getDerivedStateFromError(error) {
|
|
12
36
|
return { hasError: true, error: error };
|
|
13
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* React lifecycle hook invoked alongside {@link getDerivedStateFromError}.
|
|
40
|
+
* Forwards the error and React's component stack to the console so the
|
|
41
|
+
* failure is observable in DevTools.
|
|
42
|
+
*
|
|
43
|
+
* @param error - The error thrown by the descendant.
|
|
44
|
+
* @param errorInfo - React-supplied metadata including the component stack.
|
|
45
|
+
*/
|
|
14
46
|
componentDidCatch(error, errorInfo) {
|
|
15
47
|
console.error('Uncaught error:', error, errorInfo);
|
|
16
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":[null],"names":["Component","_jsxs","_jsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":[null],"names":["Component","_jsxs","_jsx"],"mappings":";;;;;AAuBA;;;;;;;;;;;;;;;;AAgBG;AACG,MAAO,aAAc,SAAQA,eAAuB,CAAA;;AAE/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;AAED;;;;;AAKG;IACI,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;AAEA;;;;;;;AAOG;IACI,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,gCAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* Copyright (c) Cratis. All rights reserved. */
|
|
2
|
+
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
|
|
3
|
+
|
|
4
|
+
.cratis-form-element {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex: 1 1 auto;
|
|
7
|
+
align-items: stretch;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.cratis-form-element__addon {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
padding: 0 0.75rem;
|
|
15
|
+
color: var(--cratis-text-color-secondary);
|
|
16
|
+
background: var(--cratis-surface-100);
|
|
17
|
+
border: 1px solid var(--cratis-surface-border);
|
|
18
|
+
border-right: 0;
|
|
19
|
+
border-top-left-radius: var(--cratis-border-radius);
|
|
20
|
+
border-bottom-left-radius: var(--cratis-border-radius);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.cratis-form-element > *:not(.cratis-form-element__addon) {
|
|
24
|
+
flex: 1 1 auto;
|
|
25
|
+
min-width: 0;
|
|
26
|
+
}
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
require('./FormElement.css');
|
|
4
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Lightweight wrapper that places an icon addon to the left of a form input,
|
|
8
|
+
* styled with the `--cratis-*` token layer (background, border, radius). Use
|
|
9
|
+
* it to give input fields a leading icon without pulling in PrimeReact's
|
|
10
|
+
* `InputGroup` chrome.
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <FormElement icon={<i className="pi pi-user" />}>
|
|
14
|
+
* <InputText value={name} onChange={…} />
|
|
15
|
+
* </FormElement>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
5
18
|
const FormElement = (props) => {
|
|
6
|
-
return (jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row gap-3", children: jsxRuntime.jsxs("div", { className: "
|
|
19
|
+
return (jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row gap-3", children: jsxRuntime.jsxs("div", { className: "cratis-form-element", children: [jsxRuntime.jsx("span", { className: "cratis-form-element__addon", children: props.icon }), props.children] }) }));
|
|
7
20
|
};
|
|
8
21
|
|
|
9
22
|
exports.FormElement = FormElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAoBA;;;;;;;;;;;AAWG;AACI,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC5CC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EACvC,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}
|
package/dist/cjs/Common/Page.js
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Top-level page layout primitive. Renders a flex column that fills its parent
|
|
7
|
+
* vertically, with optional title heading and optional `panel` chrome around
|
|
8
|
+
* the main content area. Intended as the root element of every routable view.
|
|
9
|
+
*
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Page title="Authors" showTitle panel>
|
|
12
|
+
* <AuthorList />
|
|
13
|
+
* </Page>
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* @param props - {@link PageProps}.
|
|
17
|
+
*/
|
|
5
18
|
const Page = ({ title, showTitle = false, children, panel, ...rest }) => {
|
|
6
19
|
return (jsxRuntime.jsxs("div", { className: 'flex flex-col h-full flex-1', ...rest, children: [showTitle && jsxRuntime.jsx("h1", { className: 'text-3xl mt-3 mb-4', children: title }), jsxRuntime.jsx("main", { className: `overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`, children: children })] }));
|
|
7
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAoCA;;;;;;;;;;;;AAYG;MACU,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACtF,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,KAAK,IAAI,EAAA,QAAA,EAAA,CAChD,SAAS,IAAIC,uBAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAC7DA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,4CAAA,EAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
/* ── Tooltip bubble ──────────────────────────────────────────────────────── */
|
|
5
5
|
.tooltip-bubble {
|
|
6
|
-
background: var(--surface-100);
|
|
7
|
-
color: var(--text-color);
|
|
8
|
-
border: 1px solid var(--surface-border);
|
|
6
|
+
background: var(--cratis-surface-100);
|
|
7
|
+
color: var(--cratis-text-color);
|
|
8
|
+
border: 1px solid var(--cratis-surface-border);
|
|
9
9
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
10
10
|
}
|
package/dist/cjs/Common/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var CratisComponentsProvider = require('./CratisComponentsProvider.js');
|
|
3
4
|
var ErrorBoundary = require('./ErrorBoundary.js');
|
|
4
5
|
var Icon = require('./Icon.js');
|
|
5
6
|
var Page = require('./Page.js');
|
|
@@ -9,6 +10,9 @@ var Tooltip = require('./Tooltip.js');
|
|
|
9
10
|
// Copyright (c) Cratis. All rights reserved.
|
|
10
11
|
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
|
|
11
12
|
|
|
13
|
+
exports.CratisComponentsProvider = CratisComponentsProvider.CratisComponentsProvider;
|
|
14
|
+
exports.cratisDefaults = CratisComponentsProvider.cratisDefaults;
|
|
15
|
+
exports.mergeCratisComponentsConfig = CratisComponentsProvider.mergeCratisComponentsConfig;
|
|
12
16
|
exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
|
|
13
17
|
exports.IconDisplay = Icon.IconDisplay;
|
|
14
18
|
exports.Page = Page.Page;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;AACA;;;;;;;;;;;"}
|
|
@@ -9,10 +9,22 @@ var DataTableForObservableQuery = require('../DataTables/DataTableForObservableQ
|
|
|
9
9
|
var DataTableForQuery = require('../DataTables/DataTableForQuery.js');
|
|
10
10
|
var allotment = require('allotment');
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Declarative menu item for use inside `<DataPage.MenuItems>`. Renders nothing
|
|
14
|
+
* directly; the surrounding {@link MenuItems} component reads its props and
|
|
15
|
+
* forwards them to the action `Menubar`.
|
|
16
|
+
*/
|
|
12
17
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
13
18
|
const MenuItem = (_) => {
|
|
14
19
|
return null;
|
|
15
20
|
};
|
|
21
|
+
/**
|
|
22
|
+
* Renders an action `Menubar` at the top of a {@link DataPage}, populated from
|
|
23
|
+
* `<DataPage.MenuItem>` children. Each menu item's `disableOnUnselected` flag
|
|
24
|
+
* is automatically honored against the current row selection.
|
|
25
|
+
*
|
|
26
|
+
* Use as `<DataPage.MenuItems>` inside a `<DataPage>`.
|
|
27
|
+
*/
|
|
16
28
|
const MenuItems = ({ children }) => {
|
|
17
29
|
const context = useDataPageContext();
|
|
18
30
|
const isDisabled = React.useMemo(() => {
|
|
@@ -31,15 +43,24 @@ const MenuItems = ({ children }) => {
|
|
|
31
43
|
});
|
|
32
44
|
return menuItems;
|
|
33
45
|
}, [children, context.selectedItem]);
|
|
34
|
-
return (jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx(menubar.Menubar, { "aria-label": "Actions", model: items }) }));
|
|
46
|
+
return (jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx(menubar.Menubar, { "aria-label": "Actions", model: items, className: context.menubarClassName, pt: context.menubarPt, ptOptions: context.menubarPtOptions, unstyled: context.menubarUnstyled }) }));
|
|
35
47
|
};
|
|
48
|
+
/**
|
|
49
|
+
* Renders the data table at the body of a {@link DataPage}. Automatically
|
|
50
|
+
* selects between {@link DataTableForQuery} (snapshot query) and
|
|
51
|
+
* {@link DataTableForObservableQuery} (real-time observable) based on the
|
|
52
|
+
* `query` type provided to the surrounding `<DataPage>`.
|
|
53
|
+
*
|
|
54
|
+
* Use as `<DataPage.Columns>` inside a `<DataPage>`, with PrimeReact `<Column>`
|
|
55
|
+
* children defining the table columns.
|
|
56
|
+
*/
|
|
36
57
|
const Columns = ({ children }) => {
|
|
37
58
|
const context = useDataPageContext();
|
|
38
59
|
if (context.query.prototype instanceof queries.QueryFor) {
|
|
39
|
-
return (jsxRuntime.jsx(DataTableForQuery.DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, children: children }));
|
|
60
|
+
return (jsxRuntime.jsx(DataTableForQuery.DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, className: context.tableClassName, pt: context.tablePt, ptOptions: context.tablePtOptions, unstyled: context.tableUnstyled, children: children }));
|
|
40
61
|
}
|
|
41
62
|
else {
|
|
42
|
-
return (jsxRuntime.jsx(DataTableForObservableQuery.DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, children: children }));
|
|
63
|
+
return (jsxRuntime.jsx(DataTableForObservableQuery.DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, className: context.tableClassName, pt: context.tablePt, ptOptions: context.tablePtOptions, unstyled: context.tableUnstyled, children: children }));
|
|
43
64
|
}
|
|
44
65
|
};
|
|
45
66
|
const DataPageContext = React.createContext(null);
|
|
@@ -51,9 +72,86 @@ function useDataPageContext() {
|
|
|
51
72
|
return context;
|
|
52
73
|
}
|
|
53
74
|
/**
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
75
|
+
* A page primitive that combines an action menubar, a query-backed data
|
|
76
|
+
* table, and an optional details pane into one layout. Designed as the
|
|
77
|
+
* default rendering for "list view" pages in an Arc app.
|
|
78
|
+
*
|
|
79
|
+
* ## What `TQuery` is
|
|
80
|
+
*
|
|
81
|
+
* `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
|
|
82
|
+
* generator from a C# read model query. Two flavors are accepted and
|
|
83
|
+
* **selected automatically at runtime** based on the class hierarchy:
|
|
84
|
+
*
|
|
85
|
+
* - **`IQueryFor<TDataType, TArguments>`** — a snapshot query. Re-fetched
|
|
86
|
+
* when `queryArguments` change or when the page is mounted. Rendered
|
|
87
|
+
* through {@link DataTableForQuery} internally.
|
|
88
|
+
* - **`IObservableQueryFor<TDataType, TArguments>`** — a real-time
|
|
89
|
+
* subscription. Connects to the backend over WebSocket and re-renders
|
|
90
|
+
* automatically whenever the underlying read model changes server-side.
|
|
91
|
+
* Rendered through {@link DataTableForObservableQuery} internally.
|
|
92
|
+
*
|
|
93
|
+
* You don't pick which inner table to use — `DataPage` inspects the
|
|
94
|
+
* prototype chain (`context.query.prototype instanceof QueryFor`) and
|
|
95
|
+
* mounts the correct one.
|
|
96
|
+
*
|
|
97
|
+
* ## Declarative composition
|
|
98
|
+
*
|
|
99
|
+
* Three children build up the page:
|
|
100
|
+
*
|
|
101
|
+
* - **`<DataPage.MenuItems>`** wraps `<DataPage.MenuItem>` elements that
|
|
102
|
+
* become the action `Menubar` at the top. Each item declares its `icon`,
|
|
103
|
+
* `label`, and `command` (an `onClick` handler). Items can be marked
|
|
104
|
+
* `disableOnUnselected` so they automatically grey out until the user
|
|
105
|
+
* picks a row — useful for Edit / Delete actions that need a target.
|
|
106
|
+
*
|
|
107
|
+
* - **`<DataPage.Columns>`** wraps PrimeReact `<Column>` elements that
|
|
108
|
+
* describe the visible columns. The columns themselves are
|
|
109
|
+
* PrimeReact's — anything supported by their `DataTable` `<Column>` is
|
|
110
|
+
* supported here (sorting, filtering, custom body templates, …).
|
|
111
|
+
*
|
|
112
|
+
* - **`detailsComponent`** (optional) is a React component rendered in a
|
|
113
|
+
* right-hand pane via Allotment when a row is selected. It receives the
|
|
114
|
+
* selected item as `item` and an `onRefresh` callback the parent can
|
|
115
|
+
* invoke to ask the page to refetch.
|
|
116
|
+
*
|
|
117
|
+
* ## Selection lifecycle
|
|
118
|
+
*
|
|
119
|
+
* `DataPage` keeps the current selection in local state and threads it to
|
|
120
|
+
* the inner table, the menubar (`disableOnUnselected` items follow it),
|
|
121
|
+
* and the optional details pane. The `onSelectionChange` prop is invoked
|
|
122
|
+
* after every change if the consumer also needs to react to it.
|
|
123
|
+
*
|
|
124
|
+
* ```tsx
|
|
125
|
+
* <DataPage<AllAuthors, Author, never>
|
|
126
|
+
* title="Authors"
|
|
127
|
+
* query={AllAuthors} // proxy from C#
|
|
128
|
+
* detailsComponent={AuthorDetails}>
|
|
129
|
+
* <DataPage.MenuItems>
|
|
130
|
+
* <DataPage.MenuItem icon={FaPlus} label="Add" command={onAdd} />
|
|
131
|
+
* <DataPage.MenuItem icon={FaPencil} label="Edit" command={onEdit}
|
|
132
|
+
* disableOnUnselected />
|
|
133
|
+
* <DataPage.MenuItem icon={FaTrash} label="Delete" command={onDelete}
|
|
134
|
+
* disableOnUnselected />
|
|
135
|
+
* </DataPage.MenuItems>
|
|
136
|
+
* <DataPage.Columns>
|
|
137
|
+
* <Column field="name" header="Name" sortable />
|
|
138
|
+
* <Column field="email" header="Email" />
|
|
139
|
+
* </DataPage.Columns>
|
|
140
|
+
* </DataPage>
|
|
141
|
+
* ```
|
|
142
|
+
*
|
|
143
|
+
* ## Styling
|
|
144
|
+
*
|
|
145
|
+
* The inner DataTable and Menubar each have their own per-slot props:
|
|
146
|
+
* `tablePt` / `tableUnstyled` / `tableClassName` for the table;
|
|
147
|
+
* `menubarPt` / `menubarUnstyled` / `menubarClassName` for the action
|
|
148
|
+
* menubar. See the [pass-through cheat sheet](../../Documentation/Styling/pass-through.md)
|
|
149
|
+
* for the full slot reference.
|
|
150
|
+
*
|
|
151
|
+
* @typeParam TQuery - The query class (proxy generated from a C# read model query).
|
|
152
|
+
* @typeParam TDataType - The row type returned by the query.
|
|
153
|
+
* @typeParam TArguments - The query's argument object type.
|
|
154
|
+
* @param props - {@link DataPageProps}.
|
|
57
155
|
*/
|
|
58
156
|
const DataPage = (props) => {
|
|
59
157
|
const [selectedItem, setSelectedItem] = React.useState(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataPage.js","sources":["../../../DataPage/DataPage.tsx"],"sourcesContent":[null],"names":["useMemo","_jsx","Menubar","QueryFor","DataTableForQuery","DataTableForObservableQuery","Page","_jsxs","Allotment"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DataPage.js","sources":["../../../DataPage/DataPage.tsx"],"sourcesContent":[null],"names":["useMemo","_jsx","Menubar","QueryFor","DataTableForQuery","DataTableForObservableQuery","Page","_jsxs","Allotment"],"mappings":";;;;;;;;;;;AA8BA;;;;AAIG;AACH;AACO,MAAM,QAAQ,GAAG,CAAC,CAAgB,KAAI;AACzC,IAAA,OAAO,IAAI;AACf;AAkBA;;;;;;AAMG;MACU,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAkB,KAAI;AACtD,IAAA,MAAM,OAAO,GAAG,kBAAkB,EAAE;AAEpC,IAAA,MAAM,UAAU,GAAGA,aAAO,CAAC,MAAK;AAC5B,QAAA,OAAO,CAAC,OAAO,CAAC,YAAY;AAChC,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;AAE1B,IAAA,MAAM,KAAK,GAAGA,aAAO,CAAC,MAAK;QACvB,MAAM,SAAS,GAAoB,EAAE;QACrC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACvC,YAAA,IAAI,KAAK,CAAC,cAAc,CAAgB,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE;AACtE,gBAAA,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI;gBAC7B,MAAM,QAAQ,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE;gBACnC,QAAQ,CAAC,IAAI,GAAGC,cAAA,CAAC,IAAI,IAAC,SAAS,EAAC,MAAM,EAAA,CAAG;gBACzC,QAAQ,CAAC,QAAQ,GAAG,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,mBAAmB;AACjE,gBAAA,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC5B;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,SAAS;IACpB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;AAEpC,IAAA,QACIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACtBA,eAACC,eAAO,EAAA,EAAA,YAAA,EACO,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,OAAO,CAAC,gBAAgB,EACnC,EAAE,EAAE,OAAO,CAAC,SAAS,EACrB,SAAS,EAAE,OAAO,CAAC,gBAAgB,EACnC,QAAQ,EAAE,OAAO,CAAC,eAAe,EAAA,CACnC,EAAA,CACA;AACd;AAEA;;;;;;;;AAQG;MACU,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAe,KAAI;AAEjD,IAAA,MAAM,OAAO,GAAG,kBAAkB,EAAE;IAEpC,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,YAAYC,gBAAQ,EAAE;QAC7C,QACIF,eAACG,mCAAiB,EAAA,EAAA,GACV,OAAO,EACX,SAAS,EAAE,OAAO,CAAC,YAAY,EAC/B,iBAAiB,EAAE,OAAO,CAAC,kBAAkB,EAC7C,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,EAAE,EAAE,OAAO,CAAC,OAAO,EACnB,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,QAAQ,EAAE,OAAO,CAAC,aAAa,EAAA,QAAA,EAC9B,QAAQ,EAAA,CACO;IAE5B;SAAO;QACH,QACIH,eAACI,uDAA2B,EAAA,EAAA,GACpB,OAAO,EACX,SAAS,EAAE,OAAO,CAAC,YAAY,EAC/B,iBAAiB,EAAE,OAAO,CAAC,kBAAkB,EAC7C,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,EAAE,EAAE,OAAO,CAAC,OAAO,EACnB,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,QAAQ,EAAE,OAAO,CAAC,aAAa,EAAA,QAAA,EAC9B,QAAQ,EAAA,CACiB;IACtC;AACJ;AAyBA,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI,CAAC;AAE1E,SAAS,kBAAkB,GAAA;IACvB,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC;IACjD,IAAI,CAAC,OAAO,EAAE;AACV,QAAA,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC;IAClF;AACA,IAAA,OAAO,OAAO;AAClB;AAwGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFG;AACH,MAAM,QAAQ,GAAG,CAAwI,KAAmD,KAAI;AAC5M,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC;AAEjE,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAA2C,KAAI;AACrE,QAAA,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACzB,YAAA,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC9B;AACJ,IAAA,CAAC;AAED,IAAA,MAAM,OAAO,GAAG,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE;IAEhF,QACIJ,cAAA,CAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACpCA,cAAA,CAACK,SAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAA,QAAA,EACjCC,eAAA,CAACC,mBAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,kBAAkB,EAAE,KAAK,aACnDP,cAAA,CAACO,mBAAS,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAChC,KAAK,CAAC,QAAQ,EAAA,CACF,EAChB,KAAK,CAAC,gBAAgB,IAAI,YAAY;AACnC,wBAAAP,cAAA,CAACO,mBAAS,CAAC,IAAI,EAAA,EAAC,aAAa,EAAC,OAAO,EAAA,QAAA,EACjCP,cAAA,CAAC,KAAK,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,EAAA,CAC7D,CAAA,EAAA,CAEb,EAAA,CACT,EAAA,CACgB;AAEnC;AAEA,QAAQ,CAAC,SAAS,GAAG,SAAS;AAC9B,QAAQ,CAAC,OAAO,GAAG,OAAO;;;;;;;"}
|
|
@@ -9,9 +9,68 @@ var React = require('react');
|
|
|
9
9
|
|
|
10
10
|
const paging = new queries.Paging(0, 20);
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
12
|
+
* A paged data table bound to a Cratis Arc **observable** query
|
|
13
|
+
* (`IObservableQueryFor<TDataType, TArguments>`). Subscribes via
|
|
14
|
+
* `useObservableQueryWithPaging` from `@cratis/arc.react/queries`, which
|
|
15
|
+
* opens a WebSocket connection to the backend and re-renders the table
|
|
16
|
+
* automatically whenever the underlying read model changes server-side.
|
|
17
|
+
*
|
|
18
|
+
* ## What `TQuery` is
|
|
19
|
+
*
|
|
20
|
+
* `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
|
|
21
|
+
* generator from a C# read model's static observable query method (one
|
|
22
|
+
* that returns `ISubject<TDataType>` on the backend). The proxy hooks the
|
|
23
|
+
* WebSocket subscription up; you only deal with the resulting React data.
|
|
24
|
+
*
|
|
25
|
+
* ## What's unique
|
|
26
|
+
*
|
|
27
|
+
* - **Real-time updates**: server-side projection writes flow into the
|
|
28
|
+
* table within the same render cycle, with no manual polling or refresh
|
|
29
|
+
* button. The connection re-subscribes automatically when
|
|
30
|
+
* `queryArguments` change.
|
|
31
|
+
* - **Resize-aware scrollable height**: the wrapper observes its container
|
|
32
|
+
* via `ResizeObserver` and adjusts the inner DataTable height to fit,
|
|
33
|
+
* so the table behaves correctly inside flex layouts (it never overflows
|
|
34
|
+
* beyond its parent or shrinks below 200px).
|
|
35
|
+
* - **Lazy paging + optional client filtering**: same modes as
|
|
36
|
+
* {@link DataTableForQuery}, but the page is re-issued through the
|
|
37
|
+
* observable subscription when the user pages.
|
|
38
|
+
*
|
|
39
|
+
* Use {@link DataTableForQuery} for snapshot queries that don't need live
|
|
40
|
+
* updates. Use {@link DataPage} for a higher-level layout that combines
|
|
41
|
+
* this table with a menubar, selection, and a details pane.
|
|
42
|
+
*
|
|
43
|
+
* ## Children
|
|
44
|
+
*
|
|
45
|
+
* Children are PrimeReact `<Column>` elements — same as
|
|
46
|
+
* {@link DataTableForQuery}.
|
|
47
|
+
*
|
|
48
|
+
* ```tsx
|
|
49
|
+
* import { DataTableForObservableQuery } from '@cratis/components/DataTables';
|
|
50
|
+
* import { Column } from 'primereact/column';
|
|
51
|
+
* import { ActiveSessions } from './ActiveSessions'; // proxy from C#
|
|
52
|
+
*
|
|
53
|
+
* <DataTableForObservableQuery
|
|
54
|
+
* query={ActiveSessions}
|
|
55
|
+
* emptyMessage="No active sessions">
|
|
56
|
+
* <Column field="userName" header="User" />
|
|
57
|
+
* <Column field="startedAt" header="Started" />
|
|
58
|
+
* </DataTableForObservableQuery>
|
|
59
|
+
* ```
|
|
60
|
+
*
|
|
61
|
+
* Rows appear and disappear in this table as users log in / log out
|
|
62
|
+
* server-side — no manual refresh required.
|
|
63
|
+
*
|
|
64
|
+
* ## Styling
|
|
65
|
+
*
|
|
66
|
+
* Identical to {@link DataTableForQuery}: `pt` / `ptOptions` / `unstyled` /
|
|
67
|
+
* `className` target the inner DataTable; `paginatorPt` and friends target
|
|
68
|
+
* the inner Paginator. See [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
|
|
69
|
+
*
|
|
70
|
+
* @typeParam TQuery - The observable query class (proxy generated from C# `IObservableQueryFor`).
|
|
71
|
+
* @typeParam TDataType - The row type returned by the query.
|
|
72
|
+
* @typeParam TArguments - The query's argument object type.
|
|
73
|
+
* @param props - {@link DataTableForObservableQueryProps}.
|
|
15
74
|
*/
|
|
16
75
|
const DataTableForObservableQuery = (props) => {
|
|
17
76
|
const [filters, setFilters] = React.useState(props.defaultFilters ?? {});
|
|
@@ -58,8 +117,8 @@ const DataTableForObservableQuery = (props) => {
|
|
|
58
117
|
display: 'flex',
|
|
59
118
|
flexDirection: 'column',
|
|
60
119
|
height: '100%',
|
|
61
|
-
border: '1px solid var(--surface-border)',
|
|
62
|
-
borderRadius: 'var(--border-radius)',
|
|
120
|
+
border: '1px solid var(--cratis-surface-border)',
|
|
121
|
+
borderRadius: 'var(--cratis-border-radius)',
|
|
63
122
|
overflow: 'hidden'
|
|
64
123
|
}, children: [jsxRuntime.jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsxRuntime.jsx(datatable.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) => {
|
|
65
124
|
setFilters(e.filters);
|
|
@@ -67,7 +126,7 @@ const DataTableForObservableQuery = (props) => {
|
|
|
67
126
|
const filteredValue = e.filteredValue;
|
|
68
127
|
setFilteredTotal(filteredValue ? filteredValue.length : undefined);
|
|
69
128
|
}
|
|
70
|
-
}, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }) }), result.paging.totalItems > 0 && (jsxRuntime.jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsxRuntime.jsx(paginator.Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
|
|
129
|
+
}, 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 && (jsxRuntime.jsx("div", { style: { borderTop: '1px solid var(--cratis-surface-border)' }, children: jsxRuntime.jsx(paginator.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 }) }))] }));
|
|
71
130
|
};
|
|
72
131
|
|
|
73
132
|
exports.DataTableForObservableQuery = DataTableForObservableQuery;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":[null],"names":["Paging","useState","useObservableQueryWithPaging","useRef","useEffect","_jsxs","_jsx","DataTable","Paginator"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":[null],"names":["Paging","useState","useObservableQueryWithPaging","useRef","useEffect","_jsxs","_jsx","DataTable","Paginator"],"mappings":"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"}
|