From 8ac0baaef6b3dfc189e979f74ceb40f02a45a6bb Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Thu, 13 Jun 2024 16:37:47 +0300 Subject: [PATCH] [update] index, methods, overview links, stylization updated --- docs/api/methods/gettable-method.md | 11 ++--- docs/api/methods/setconfig-method.md | 4 +- docs/api/methods/showconfigpanel-method.md | 7 ++- docs/api/overview/events-overview.md | 1 - .../overview/internal-eventbus-overview.md | 1 + docs/api/overview/main-overview.md | 12 +++-- docs/api/overview/properties-overview.md | 2 - docs/guides/stylization.md | 48 +++++++++++-------- docs/index.md | 2 +- 9 files changed, 46 insertions(+), 42 deletions(-) diff --git a/docs/api/methods/gettable-method.md b/docs/api/methods/gettable-method.md index 76c7b19..44eb637 100644 --- a/docs/api/methods/gettable-method.md +++ b/docs/api/methods/gettable-method.md @@ -10,21 +10,18 @@ description: You can learn about the getTable method in the documentation of the @short: Gets access to the underlying Grid widget instance in the Pivot -The method provides access to the [Grid API](https://docs.svar.dev/svelte/grid/api/overview/api_overview). +This method is used when there's a need to access the underlying Grid widget instance in the Pivot. It provides direct access to all table functionality ([Grid API](https://docs.svar.dev/svelte/grid/api/overview/api_overview)), allowing for operations such as data serialization and exporting in various formats. ### Usage ~~~jsx {} -api.getTable(): Table; +getTable(wait:boolean): Table | Promise; ~~~ -### Returns -The method returns the Table object: +### Parameters -~~~jsx {} -getTable(): Table; -~~~ +`wait` - defines to wait until Grid API is available in Pivot (necessary when Grid API is used during with Pivot initialization). If `wait` is set to **true**, the method returns a promise with Grid API. ### Example diff --git a/docs/api/methods/setconfig-method.md b/docs/api/methods/setconfig-method.md index 4af49ba..4c043e2 100644 --- a/docs/api/methods/setconfig-method.md +++ b/docs/api/methods/setconfig-method.md @@ -10,10 +10,12 @@ description: You can learn about the setConfig() method in the documentation of @short: Updates the current configuration of the Pivot widget +The method is used to update the current configuration of the Pivot widget. It's useful when there's a need to update the underlying data set of the widget. The method preserves all the previously set options that are not explicitly provided in the `setConfig` call. + ### Usage ~~~jsx {} -setConfig(config: object): void; +setConfig(config: { [key:any]: any }): void; ~~~ ### Parameters diff --git a/docs/api/methods/showconfigpanel-method.md b/docs/api/methods/showconfigpanel-method.md index c444e83..6f0baaa 100644 --- a/docs/api/methods/showconfigpanel-method.md +++ b/docs/api/methods/showconfigpanel-method.md @@ -10,18 +10,17 @@ description: You can learn about the showConfigPanel() method in the documentati @short: Shows or hides the configuration panel -This method can be useful when there's a need to control the configuration panel's visibility without user interaction. For instance, you might want to hide or display the panel based on some other interaction or state in your application. +This TypeScript method can be useful when there's a need to control the visibility of the configuration panel without user interaction. For instance, you might want to hide or display the panel based on some other interaction or state in your application. + ### Usage ~~~jsx {} -showConfigPanel(config: object): void; +showConfigPanel({mode: boolean}): void; ~~~ ### Parameters -The `config` object has the following parameter: - - `mode` (boolean) - (required) if the value is set to **true** (default), the configuration panel is shown, and set to **false** when the configuration panel is hidden ### Example diff --git a/docs/api/overview/events-overview.md b/docs/api/overview/events-overview.md index 0379fe8..1577ee3 100644 --- a/docs/api/overview/events-overview.md +++ b/docs/api/overview/events-overview.md @@ -10,7 +10,6 @@ description: You can have an Events overview of JavaScript Pivot in the document | ------------------------------------------------- | ----------------------------------------------- | | [](../events/add-field-event.md) | @getshort(../events/add-field-event.md) | | [](../events/apply-filter-event.md) | @getshort(../events/apply-filter-event.md) | -| [](../events/close-filter-event.md) | @getshort(../events/close-filter-event.md) | | [](../events/delete-field-event.md) | @getshort(../events/delete-field-event.md) | | [](../events/open-filter-event.md) | @getshort(../events/open-filter-event.md) | | [](../events/render-table-event.md) | @getshort(../events/render-table-event.md) | diff --git a/docs/api/overview/internal-eventbus-overview.md b/docs/api/overview/internal-eventbus-overview.md index 972d72f..a1b5af7 100644 --- a/docs/api/overview/internal-eventbus-overview.md +++ b/docs/api/overview/internal-eventbus-overview.md @@ -8,6 +8,7 @@ description: You can have an Internal Event Bus methods overview of JavaScript P | Name | Description | | ---------------------------------------------- | ------------------------------------------------- | +| [](../internal/detach-method.md) | @getshort(../internal/detach-methos.md) | | [](../internal/exec-method.md) | @getshort(../internal/exec-method.md) | | [](../internal/intercept-method.md) | @getshort(../internal/intercept-method.md) | | [](../internal/on-method.md) | @getshort(../internal/on-method.md) | diff --git a/docs/api/overview/main-overview.md b/docs/api/overview/main-overview.md index f2491e4..44e2101 100644 --- a/docs/api/overview/main-overview.md +++ b/docs/api/overview/main-overview.md @@ -22,8 +22,11 @@ new pivot.Pivot("#root", { ## Pivot methods | Name | Description | -| :------------------------------------------ | :----------------------------------------- | -| [](../methods/some-method.md) | @getshort(../methods/some-method.md) | +| ------------------------------------------- | ------------------------------------------ | +| [](../methods/gettable-method.md) | @getshort(../methods/gettable-method.md) | +| [](../methods/setconfig-method.md) | @getshort(../methods/setconfig-method.md) | +| [](../methods/setlocale-method.md) | @getshort(../methods/setlocale-method.md) | +| [](../methods/showconfigpanel-method.md) | @getshort(../methods/showconfigpanel-method.md) | ## Pivot internal API @@ -31,6 +34,7 @@ new pivot.Pivot("#root", { | Name | Description | | :------------------------------------ | :------------------------------------------- | +| [](../internal/detach-method.md) | @getshort(../internal/detach-methos.md) | | [](../internal/exec-method.md) | @getshort(../internal/exec-method.md) | | [](../internal/intercept-method.md) | @getshort(../internal/intercept-method.md) | | [](../internal/on-method.md) | @getshort(../internal/on-method.md) | @@ -50,7 +54,6 @@ new pivot.Pivot("#root", { | :------------------------------------------------ | :---------------------------------------------- | | [](../events/add-field-event.md) | @getshort(../events/add-field-event.md) | | [](../events/apply-filter-event.md) | @getshort(../events/apply-filter-event.md) | -| [](../events/close-filter-event.md) | @getshort(../events/close-filter-event.md) | | [](../events/delete-field-event.md) | @getshort(../events/delete-field-event.md) | | [](../events/open-filter-event.md) | @getshort(../events/open-filter-event.md) | | [](../events/render-table-event.md) | @getshort(../events/render-table-event.md) | @@ -69,9 +72,8 @@ new pivot.Pivot("#root", { | [](../config/fields-property.md) | @getshort(../config/fields-property.md) | | [](../config/headershape-property.md) | @getshort(../config/headershape-property.md) | | [](../config/limits-property.md) | @getshort(../config/limits-property.md) | +| [](../config/locale-property.md) | @getshort(../config/locale-property.md) | | [](../config/methods-property.md) | @getshort(../config/methods-property.md) | | [](../config/predicates-property.md) | @getshort(../config/predicates-property.md) | | [](../config/readonly-property.md) | @getshort(../config/readonly-property.md) | -| [](../config/showconfig-property.md) | @getshort(../config/showconfig-property.md) | -| [](../config/tableconfig-property.md) | @getshort(../config/tableconfig-property.md) | | [](../config/tableshape-property.md) | @getshort(../config/tableshape-property.md) | diff --git a/docs/api/overview/properties-overview.md b/docs/api/overview/properties-overview.md index c3c3b09..89ffa54 100644 --- a/docs/api/overview/properties-overview.md +++ b/docs/api/overview/properties-overview.md @@ -19,6 +19,4 @@ To configure the **Pivot**, refer to the [Configuration](../../../guides/configu | [](../config/methods-property.md) | @getshort(../config/methods-property.md) | | [](../config/predicates-property.md) | @getshort(../config/predicates-property.md) | | [](../config/readonly-property.md) | @getshort(../config/readonly-property.md) | -| [](../config/showconfig-property.md) | @getshort(../config/showconfig-property.md) | -| [](../config/tableconfig-property.md) | @getshort(../config/tableconfig-property.md) | | [](../config/tableshape-property.md) | @getshort(../config/tableshape-property.md) | diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 1299453..271a1ad 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -26,6 +26,10 @@ TODO!!! Next versions of Pivot can bring some changes for the variables and their names. Please, do not forget to check the names after updating to the newer versions and modify them in your code to avoid problems with display of the component. ::: +## Built-in theme + +The widget provides one built-in theme which is the **Material theme**. TBD!!! + You can apply the theme via adding the corresponding *css* classes to the widget containers: - **Material theme** @@ -40,28 +44,9 @@ or just include the theme on the page from the skins folder: ~~~ -## Custom style - -You can change the appearance of Pivot by applying the corresponding CSS variables. - -The example below shows how to apply a custom style to Pivot: - -~~~html -
- -~~~ +## Customize built-in theme -The example below demonstrates how to customize Material theme that is applied to the Pivot table: +The example below demonstrates how to customize the **Material** theme that is applied to the Pivot table: ~~~html @@ -85,6 +70,27 @@ The example below demonstrates how to customize Material theme that is applied t ~~~ +## Custom style + +You can change the appearance of Pivot by applying the corresponding CSS variables. + +The example below shows how to apply a custom style to Pivot: + +~~~html +
+ +~~~ + In this snippet you can see how to apply a custom style to Pivot TODO!!! diff --git a/docs/index.md b/docs/index.md index a9c0b6f..d65390d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -110,7 +110,7 @@ The fields to which filtering is applied are marked with a special filter sign: ## Table -Data is displayed as configured via the Configuration panel. +Data in the table is displayed as configured in the Configuration panel. The sorting in columns is enabled by default: