-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into bugfix/cc-26177-category-node-reorder-publish
- Loading branch information
Showing
28 changed files
with
903 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
...ace/table-design/table-column-type-extension/table-column-type-button-action.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| --- | ||
| title: Table Column Type Button Action | ||
| description: This document provides details about the Table Column Type Button Action in the Components Library. | ||
| template: concept-topic-template | ||
| related: | ||
| - title: Table Column Type extension | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-extension.html | ||
| - title: Table Column Type Autocomplete | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-autocomplete.html | ||
| - title: Table Column Type Chip | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-chip.html | ||
| - title: Table Column Type Date | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-date.html | ||
| - title: Table Column Type Dynamic | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-dynamic.html | ||
| - title: Table Column Type Image | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-image.html | ||
| - title: Table Column Type Input | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-input.html | ||
| - title: Table Column Type List | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-list.html | ||
| - title: Table Column Type Select | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-select.html | ||
| - title: Table Column Type Text | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-text.html | ||
| --- | ||
|
|
||
| Table Column Button Action is an Angular component in the components library that renders button using the `@spryker/button.action` component. | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| Example of usage in the `@spryker/table` config: | ||
|
|
||
| ```html | ||
| <spy-table | ||
| [config]="{ | ||
| ..., | ||
| columns: [ | ||
| ..., | ||
| { | ||
| id: 'columnId', | ||
| title: 'Column Title', | ||
| type: 'button-action', | ||
| typeOptions: { | ||
| text: 'text', | ||
| action: { | ||
| type: 'http', | ||
| url: '/url', | ||
| }, | ||
| }, | ||
| }, | ||
| ..., | ||
| ], | ||
| }" | ||
| > | ||
| </spy-table> | ||
| ``` | ||
|
|
||
| ## Component registration | ||
|
|
||
| Register the component: | ||
|
|
||
| ```ts | ||
| declare module '@spryker/table' { | ||
| interface TableColumnTypeRegistry { | ||
| 'button-action': TableColumnButtonActionConfig; | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| TableModule.forRoot(), | ||
| TableModule.withColumnComponents({ | ||
| 'button-action': TableColumnButtonActionComponent, | ||
| }), | ||
| TableColumnButtonActionModule, | ||
| ], | ||
| }) | ||
| export class RootModule {} | ||
| ``` | ||
|
|
||
| ## Interfaces | ||
|
|
||
| Table Column Button Action interfaces: | ||
|
|
||
| ```ts | ||
| export type ButtonAttributes = Record<string, string>; | ||
| export type ActionType = RegistryType<ActionsRegistry>; | ||
|
|
||
| interface TableColumnButtonAction extends ActionConfig { | ||
| type: ActionType; | ||
| [k: string]: unknown; | ||
| } | ||
|
|
||
| interface TableColumnButtonActionConfig { | ||
| /** Bound to the @spryker/button-action inputs */ | ||
| text?: string; | ||
| action?: TableColumnButtonAction; | ||
| actionContext?: unknown; | ||
| variant?: ButtonVariant; // 'primary' - by default | ||
| shape?: ButtonShape; // 'default' - by default | ||
| size?: ButtonSize; // 'md' - by default | ||
| attrs?: ButtonAttributes; | ||
| } | ||
| ``` |
106 changes: 106 additions & 0 deletions
106
...ment/202204.0/marketplace/ui-components-library/actions/actions-confirmation.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| --- | ||
| title: Actions Confirmation | ||
| description: This document provides details about the Actions Confirmation service in the Components Library. | ||
| template: concept-topic-template | ||
| related: | ||
| - title: Actions | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/ui-components-library-actions.html | ||
| - title: Actions Close Drawer | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-close-drawer.html | ||
| - title: Actions Drawer | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-drawer.html | ||
| - title: Actions HTTP | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-http.html | ||
| - title: Actions Notification | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-notification.html | ||
| - title: Actions Redirect | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-redirect.html | ||
| - title: Actions Refresh Drawer | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-refresh-drawer.html | ||
| - title: Actions Refresh Parent Table | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-refresh-parent-table.html | ||
| - title: Actions Refresh Table | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-refresh-table.html | ||
|
|
||
| --- | ||
|
|
||
| Actions Confirmation is an angular Service in the components library that calls another action with a confirmation via the Modal component. | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| Service configuration: | ||
|
|
||
| | ATTRIBUTE | DESCRIPTION | | ||
| | - | - | | ||
| | `type` | An action type. | | ||
| | `action` | Registered action configuration. | | ||
| | `modal` | Modal configuration based on the `ConfirmModalStrategyOptions` interface of the Modal component. | | ||
|
|
||
|
|
||
| Usage example: | ||
|
|
||
| ```html | ||
| <spy-button-action | ||
| [action]="{ | ||
| type: 'confirmation', | ||
| action: { | ||
| type: 'redirect', | ||
| url: '/url', | ||
| }, | ||
| modal: { | ||
| description: 'Redirect to /url', | ||
| }, | ||
| }" | ||
| > | ||
| </spy-button-action> | ||
| ``` | ||
|
|
||
| ## Service registration | ||
|
|
||
| Register the service: | ||
|
|
||
| ```ts | ||
| declare module '@spryker/actions' { | ||
| interface ActionsRegistry { | ||
| confirmation: ConfirmationActionHandlerService, | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| ActionsModule.withActions({ | ||
| confirmation: ConfirmationActionHandlerService, | ||
| }), | ||
| ], | ||
| }) | ||
| export class RootModule {} | ||
| ``` | ||
|
|
||
| ## Interfaces | ||
|
|
||
| Actions Confirmation interfaces: | ||
|
|
||
| ```ts | ||
| export interface ConfirmationActionConfig extends ActionConfig { | ||
| action: ActionConfig; | ||
| modal?: ConfirmModalStrategyOptions; | ||
| } | ||
|
|
||
| export interface ConfirmModalStrategyOptions extends ConfirmModalData {} | ||
|
|
||
| export interface ConfirmModalData { | ||
| title?: string | TemplateRef<ModalTemplateContext<AnyModal>>; | ||
| description?: string | TemplateRef<ModalTemplateContext<AnyModal>>; | ||
| icon?: string | TemplateRef<ModalTemplateContext<AnyModal>>; | ||
| okText?: string | TemplateRef<ModalTemplateContext<AnyModal>>; | ||
| okType?: string; | ||
| okVariant?: ButtonVariant; | ||
| okSize?: ButtonSize; | ||
| cancelText?: string | TemplateRef<ModalTemplateContext<AnyModal>>; | ||
| cancelType?: string; | ||
| cancelVariant?: ButtonVariant; | ||
| cancelSize?: ButtonSize; | ||
| class?: string; | ||
| } | ||
| ``` |
106 changes: 106 additions & 0 deletions
106
...ace/table-design/table-column-type-extension/table-column-type-button-action.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| --- | ||
| title: Table Column Type Button Action | ||
| description: This document provides details about the Table Column Type Button Action in the Components Library. | ||
| template: concept-topic-template | ||
| related: | ||
| - title: Table Column Type extension | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-extension.html | ||
| - title: Table Column Type Autocomplete | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-autocomplete.html | ||
| - title: Table Column Type Chip | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-chip.html | ||
| - title: Table Column Type Date | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-date.html | ||
| - title: Table Column Type Dynamic | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-dynamic.html | ||
| - title: Table Column Type Image | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-image.html | ||
| - title: Table Column Type Input | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-input.html | ||
| - title: Table Column Type List | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-list.html | ||
| - title: Table Column Type Select | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-select.html | ||
| - title: Table Column Type Text | ||
| link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-text.html | ||
| --- | ||
|
|
||
| Table Column Button Action is an Angular component in the components library that renders button using the `@spryker/button.action` component. | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| Example of usage in the `@spryker/table` config: | ||
|
|
||
| ```html | ||
| <spy-table | ||
| [config]="{ | ||
| ..., | ||
| columns: [ | ||
| ..., | ||
| { | ||
| id: 'columnId', | ||
| title: 'Column Title', | ||
| type: 'button-action', | ||
| typeOptions: { | ||
| text: 'text', | ||
| action: { | ||
| type: 'http', | ||
| url: '/url', | ||
| }, | ||
| }, | ||
| }, | ||
| ..., | ||
| ], | ||
| }" | ||
| > | ||
| </spy-table> | ||
| ``` | ||
|
|
||
| ## Component registration | ||
|
|
||
| Register the component: | ||
|
|
||
| ```ts | ||
| declare module '@spryker/table' { | ||
| interface TableColumnTypeRegistry { | ||
| 'button-action': TableColumnButtonActionConfig; | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| TableModule.forRoot(), | ||
| TableModule.withColumnComponents({ | ||
| 'button-action': TableColumnButtonActionComponent, | ||
| }), | ||
| TableColumnButtonActionModule, | ||
| ], | ||
| }) | ||
| export class RootModule {} | ||
| ``` | ||
|
|
||
| ## Interfaces | ||
|
|
||
| Table Column Button Action interfaces: | ||
|
|
||
| ```ts | ||
| export type ButtonAttributes = Record<string, string>; | ||
| export type ActionType = RegistryType<ActionsRegistry>; | ||
|
|
||
| interface TableColumnButtonAction extends ActionConfig { | ||
| type: ActionType; | ||
| [k: string]: unknown; | ||
| } | ||
|
|
||
| interface TableColumnButtonActionConfig { | ||
| /** Bound to the @spryker/button-action inputs */ | ||
| text?: string; | ||
| action?: TableColumnButtonAction; | ||
| actionContext?: unknown; | ||
| variant?: ButtonVariant; // 'primary' - by default | ||
| shape?: ButtonShape; // 'default' - by default | ||
| size?: ButtonSize; // 'md' - by default | ||
| attrs?: ButtonAttributes; | ||
| } | ||
| ``` |
Oops, something went wrong.