mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2596] Fixed inputs with incorrect names (#3166)
* [ADF-2596] Updated prop script to handle names from input decorators * [ADF-2596] Fixed inputs with accessors * [ADF-2596] Fixed remaining inputs with wrong names * [ADF-2596] Updated prop script to handle names from input decorators * [ADF-2596] Fixed inputs with accessors * [ADF-2596] Fixed remaining inputs with wrong names
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
a32b1b7359
commit
2a5fe7ad28
@@ -1,7 +1,9 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Context Menu directive
|
||||
|
||||
Adds a context menu to a component.
|
||||
@@ -40,11 +42,14 @@ export class MyComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ---- | ---- | ------- | ----------- |
|
||||
| showIcons | boolean | false | Render defined icons |
|
||||
| Name | Type | Default value | Description |
|
||||
| -- | -- | -- | -- |
|
||||
| context-menu-enabled | `boolean` | false | |
|
||||
| context-menu | `any[]` | | |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# DataColumn Component
|
||||
|
||||
# Data Column Component
|
||||
|
||||
Defines column properties for DataTable, Tasklist, Document List and other components.
|
||||
|
||||
@@ -10,6 +11,8 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
|
||||
- [Class members](#class-members)
|
||||
|
||||
- [Properties](#properties)
|
||||
|
||||
- [Details](#details)
|
||||
@@ -35,18 +38,20 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. |
|
||||
| type | `string` | `'text'` | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
|
||||
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
|
||||
| sortable | `boolean` | `true` | Toggles ability to sort by this column, for example by clicking the column header. |
|
||||
| title | `string` | `''` | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
|
||||
| formatTooltip | `Function` | | Custom tooltip formatter function. |
|
||||
| srTitle | `string` | | Title to be used for screen readers. |
|
||||
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
|
||||
| -- | -- | -- | -- |
|
||||
| class | `string` | | Additional CSS class to be applied to column (header and cells). |
|
||||
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
|
||||
| formatTooltip | `Function` | | Custom tooltip formatter function. |
|
||||
| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. |
|
||||
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
|
||||
| sr-title | `string` | | Title to be used for screen readers. |
|
||||
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
|
||||
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# File Draggable directive
|
||||
|
||||
Provide drag-and-drop features for an element such as a `div`.
|
||||
Provides drag-and-drop features for an element such as a `div`.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
@@ -32,19 +34,21 @@ Some sample CSS to show the drag and drop area:
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| enabled | `boolean` | `true` | Enables/disables drag-and-drop functionality. |
|
||||
| -- | -- | -- | -- |
|
||||
| file-draggable | `boolean` | true | Enables/disables drag-and-drop functionality. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| filesDropped | `EventEmitter<File[]>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
|
||||
| filesEntityDropped | `EventEmitter<any>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
|
||||
| folderEntityDropped | `EventEmitter<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
|
||||
| -- | -- | -- |
|
||||
| filesDropped | `EventEmitter<File[]>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
|
||||
| filesEntityDropped | `EventEmitter<any>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
|
||||
| folderEntityDropped | `EventEmitter<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Highlight directive
|
||||
|
||||
Adds highlighting to selected sections of an HTML element's content.
|
||||
@@ -18,13 +20,15 @@ Adds highlighting to selected sections of an HTML element's content.
|
||||
</div>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| selector | `string` | `''` | Class selector for highlightable elements. |
|
||||
| search | `string` | `''` | Text to highlight. |
|
||||
| classToApply | `string` | `'adf-highlight'` | CSS class used to apply highlighting. |
|
||||
| -- | -- | -- | -- |
|
||||
| adf-highlight-class | `string` | "adf-highlight" | CSS class used to apply highlighting. |
|
||||
| adf-highlight | `string` | "" | Text to highlight. |
|
||||
| adf-highlight-selector | `string` | "" | Class selector for highlightable elements. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-06
|
||||
---
|
||||
|
||||
# Infinite Pagination component
|
||||
|
||||
Adds "infinite" pagination to the component it is used with.
|
||||
@@ -18,24 +20,27 @@ Adds "infinite" pagination to the component it is used with.
|
||||
</adf-infinite-pagination>
|
||||
```
|
||||
|
||||
## Integrating with Document List
|
||||
### Integrating with Document List
|
||||
|
||||
```html
|
||||
<adf-document-list #documentList ...></adf-document-list>
|
||||
|
||||
<adf-infinite-pagination
|
||||
[target]="documentList">
|
||||
[target]="documentList"
|
||||
[loading="documentList.infiniteLoading">
|
||||
</adf-infinite-pagination>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| pagination | `Pagination` | | Pagination object. |
|
||||
| target | `PaginatedComponent` | | Component that provides custom pagination support. |
|
||||
| pageSize | `number` | `InfinitePaginationComponent.DEFAULT_PAGE_SIZE` | Number of items that are added with each "load more" event. |
|
||||
| loading | `boolean` | `false` | Is a new page loading? |
|
||||
| loading | `boolean` | false | Is a new page loading? |
|
||||
| pageSize | `number` | InfinitePaginationComponent.DEFAULT_PAGE_SIZE | Number of items that are added with each "load more" event. |
|
||||
| pagination | `Pagination` | | Pagination object. |
|
||||
| target | `PaginatedComponent` | | Component that provides custom pagination support. |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
# InfoDrawer component
|
||||
|
||||
# Info Drawer component
|
||||
|
||||
Displays a sidebar-style information panel with tabs.
|
||||
|
||||
@@ -28,17 +30,19 @@ Displays a sidebar-style information panel with tabs.
|
||||
</adf-info-drawer>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| title | `string` | `null` | The title of the info drawer. |
|
||||
| selectedIndex | `number` | `0` | The selected index tab. |
|
||||
| -- | -- | -- | -- |
|
||||
| selectedIndex | `number` | 0 | The selected index tab. |
|
||||
| title | `string | null` | null | The title of the info drawer. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| -- | -- | -- |
|
||||
| currentTab | `EventEmitter<number>` | Emitted when the currently active tab changes. |
|
||||
|
||||
## Details
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-21
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Node Delete directive
|
||||
@@ -23,18 +23,20 @@ Deletes multiple files and folders.
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| selection | `MinimalNodeEntity[] | DeletedNodeEntity[]` | | Array of nodes to delete. |
|
||||
| permanent | `boolean` | `false` | If true then the nodes are deleted immediately rather than being put in the trash. |
|
||||
| -- | -- | -- | -- |
|
||||
| permanent | `boolean` | false | If true then the nodes are deleted immediately rather than being put in the trash |
|
||||
| adf-delete | `MinimalNodeEntity[] | DeletedNodeEntity[]` | | Array of nodes to delete. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| delete | `EventEmitter<any>` | Emitted when the nodes have been deleted. |
|
||||
| -- | -- | -- |
|
||||
| delete | `EventEmitter<any>` | Emitted when the nodes have been deleted. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Node Favorite directive
|
||||
|
||||
Selectively toggles nodes as favorite
|
||||
Selectively toggles nodes as favorites.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
@@ -34,22 +36,24 @@ export class MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| selection | `MinimalNodeEntity[]` | `[]` | Array of nodes to toggle as favorites. |
|
||||
| -- | -- | -- | -- |
|
||||
| adf-node-favorite | `MinimalNodeEntity[]` | \[] | Array of nodes to toggle as favorites. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| toggle | `EventEmitter<any>` | Emitted when the favorite setting is complete. |
|
||||
| -- | -- | -- |
|
||||
| toggle | `EventEmitter<any>` | Emitted when the favorite setting is complete. |
|
||||
|
||||
## Details
|
||||
|
||||
The `NodeFavoriteDirective` instance can be bound to a template variable through **adfFavorite** reference,
|
||||
which provides a method to help further style the element.
|
||||
You can bind the directive instance to a template variable through the **adfFavorite** reference,
|
||||
which also lets you add extra styling to the element:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
@@ -67,11 +71,11 @@ which provides a method to help further style the element.
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
The directive performs as follows:
|
||||
The directive behaves as follows:
|
||||
|
||||
- if there are no favorite nodes in the selection, then all are marked as favorites
|
||||
- if there is at least one favorite node in the selection, then only those who are not
|
||||
are being marked
|
||||
- if all nodes in the selection are favorites, then they are removed from favorites
|
||||
- If there are no favorite nodes in the selection, then all are marked as favorites
|
||||
- If there are one or more favorite node in the selection, then only those that are not
|
||||
favorites are marked
|
||||
- If all nodes in the selection are favorites, then they all have their favorite status removed
|
||||
|
||||
See **Demo Shell**
|
||||
See the **Demo Shell** for examples of usage.
|
||||
|
||||
@@ -1,36 +1,15 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Node Permission directive
|
||||
|
||||
Selectively disables an HTML element or Angular component
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| permission | `string` | `null` | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
|
||||
| nodes | `MinimalNodeEntity[]` | `[]` | Nodes to check permission for. |
|
||||
|
||||
## Details
|
||||
|
||||
The `NodePermissionDirective` allows you to disable an HTML element or Angular component
|
||||
by taking a collection of the `MinimalNodeEntity` instances and checking the particular permission.
|
||||
|
||||
The decorated element will be disabled if:
|
||||
|
||||
- there are no nodes in the collection
|
||||
- at least one of the nodes has no expected permission
|
||||
|
||||
### HTML element example
|
||||
|
||||
The best example to show `NodePermissionDirective` in action is by binding DocumentList selection property to a toolbar button.
|
||||
|
||||
For example the "Delete" button should be disabled if no selection is present or if user has no rights to delete at least one node in the selection.
|
||||
|
||||
```html
|
||||
<adf-toolbar title="toolbar example">
|
||||
<button mat-icon-button
|
||||
@@ -45,11 +24,54 @@ For example the "Delete" button should be disabled if no selection is present or
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
The button will become disabled by default, and is going to change its state once user selects/unselects one or multiple documents that current user has permission to delete.
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| -- | -- | -- | -- |
|
||||
| adf-nodes | `MinimalNodeEntity[]` | \[] | Nodes to check permission for. |
|
||||
| adf-node-permission | `string` | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
|
||||
|
||||
## Details
|
||||
|
||||
The Node Permission directive lets you disable an HTML element or Angular component
|
||||
by taking a collection of `MinimalNodeEntity` instances and checking their permissions.
|
||||
|
||||
The decorated element will be disabled if:
|
||||
|
||||
- there are no nodes in the collection
|
||||
- at least one of the nodes does not have the required permission
|
||||
|
||||
### HTML element example
|
||||
|
||||
A typical use case is to bind a [Document List](../content-services/document-list.component.md)
|
||||
selection property to a toolbar button. In the following example, the "Delete" button should
|
||||
be disabled if no selection is present or if user does not have permission to delete at least one
|
||||
node in the selection:
|
||||
|
||||
```html
|
||||
<adf-toolbar title="toolbar example">
|
||||
<button mat-icon-button
|
||||
adf-node-permission="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
The button will be disabled by default and will change state when the user selects or deselects
|
||||
one or more documents that they have permission to delete.
|
||||
|
||||
### Angular component example
|
||||
|
||||
You can apply the directive on any angular component which implements the NodePermissionSubject interface. The upload drag area component can be a good candidate, since this one implements that interface. Applying the directive on an angular component is pretty much the same as applying it on an html element.
|
||||
You can add the directive to any Angular component that implements the `NodePermissionSubject`
|
||||
interface (the [Upload Drag Area component](../content-services/upload-drag-area.component.md),
|
||||
for example). You can also use it in much the same way as you would with an HTML element:
|
||||
|
||||
```html
|
||||
<alfresco-upload-drag-area
|
||||
@@ -61,11 +83,14 @@ You can apply the directive on any angular component which implements the NodePe
|
||||
</alfresco-upload-drag-area>
|
||||
```
|
||||
|
||||
When designing a component you want to work this directive with, you have two important things to care about.
|
||||
To enable your own component to work with this directive, you need to implement the
|
||||
`NodePermissionSubject` interface and also define it as an EXTENDIBLE_COMPONENT parent component,
|
||||
as described in the following sections.
|
||||
|
||||
### Implementing the NodePermissionSubject interface
|
||||
|
||||
The component has to implement the NodePermissionSubject interface which basically means it has to have a boolean **disabled** property. This is the property which will be set by the directive.
|
||||
The component must implement the `NodePermissionSubject` interface which means it must have a
|
||||
boolean `disabled` property. This is the property that will be set by the directive:
|
||||
|
||||
```js
|
||||
import { NodePermissionSubject } from '@alfresco/adf-core';
|
||||
@@ -76,14 +101,13 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
|
||||
}
|
||||
```
|
||||
|
||||
### Defining your components as an EXTENDIBLE_COMPONENT parent component
|
||||
### Defining your component as an EXTENDIBLE_COMPONENT parent component
|
||||
|
||||
The directive will look up the component in the dependency injection tree, up to the @Host() component.
|
||||
|
||||
> "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"
|
||||
|
||||
- because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
|
||||
- because of the emphasized second sentence you have to provide your component as a viewProvider.
|
||||
The directive will look up the component in the dependency injection tree,
|
||||
up to the `@Host()` component. The host component is typically the component that requests
|
||||
the dependency. However, when this component is projected into a parent component, the
|
||||
parent becomes the host. This means you must provide your component with forward referencing
|
||||
as the `EXTENDIBLE_COMPONENT` and also provide your component as a `viewProvider`:
|
||||
|
||||
```js
|
||||
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
|
||||
@@ -97,4 +121,5 @@ import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
|
||||
export class UploadDragAreaComponent implements NodePermissionSubject { ... }
|
||||
```
|
||||
|
||||
**Notice the usage of viewProviders (instead of providers)! This part is very important, especially if you want to use this directive on a transcluded component!**
|
||||
**Note:** the usage of **viewProviders** (instead of **providers**) is very important, especially
|
||||
if you want to use this directive on a transcluded component.
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Node Restore directive
|
||||
|
||||
Restores deleted nodes to their original location.
|
||||
@@ -24,25 +26,29 @@ Restores deleted nodes to their original location.
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| selection | `DeletedNodeEntry[]` | | Array of deleted nodes to restore. |
|
||||
| location | `string` | `''` | Path to restored node. |
|
||||
| -- | -- | -- | -- |
|
||||
| location | `string` | "" | Path to restored node. |
|
||||
| adf-restore | `DeletedNodeEntry[]` | | Array of deleted nodes to restore. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| restore | `EventEmitter<any>` | Emitted when restoration is complete. |
|
||||
| -- | -- | -- |
|
||||
| restore | `EventEmitter<any>` | Emitted when restoration is complete. |
|
||||
|
||||
## Details
|
||||
|
||||
'NodeRestoreDirective' directive takes a selection of `DeletedNodeEntry[]` and restores them in their original location.
|
||||
If the original location doesn't exist anymore, then they remain in the trash list.
|
||||
The directive takes a selection of `DeletedNodeEntry` instances and restores them to
|
||||
their original locations. If the original location doesn't exist anymore then they remain
|
||||
in the trash list.
|
||||
|
||||
For single node restore, there is action to jump to the location where the node has been restored and for this `location` is used to specify the route path where the list of nodes are rendered
|
||||
When you restore a single node, you can use the `location` property to show where the node has
|
||||
been restored. The property specifies the route path where the list of nodes are rendered.
|
||||
|
||||
## See Also
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Text Mask directive
|
||||
|
||||
Implements text field input masks.
|
||||
|
||||
@@ -1,15 +1,47 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-10
|
||||
---
|
||||
|
||||
# Upload Directive
|
||||
|
||||
Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
|
||||
Uploads content in response to file drag and drop.
|
||||
|
||||
## Basic usage
|
||||
|
||||
The directive itself does not do any file management process,
|
||||
but collects information on dropped files and raises corresponding events instead.
|
||||
```html
|
||||
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
|
||||
Upload photos
|
||||
</button>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| -- | -- | -- | -- |
|
||||
| accept | `string` | | (Click mode only) MIME type filter for files to accept. |
|
||||
| adf-upload-data | `any` | | Data to upload. |
|
||||
| directory | `boolean` | | (Click mode only) Toggles uploading of directories. |
|
||||
| adf-upload | `boolean` | true | Enables/disables uploading. |
|
||||
| mode | `string[]` | ['drop'] | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. |
|
||||
| multiple | `boolean` | | Toggles multiple file uploads. |
|
||||
|
||||
## Details
|
||||
|
||||
Add the directive to a component or HTML element to enable it to upload files.
|
||||
You can decorate any element including buttons:
|
||||
|
||||
```html
|
||||
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
|
||||
Upload photos
|
||||
</button>
|
||||
```
|
||||
|
||||
The directive itself does not do any file management, but it collects information about
|
||||
dropped files and emits events in response.
|
||||
|
||||
```html
|
||||
<div style="width:100px; height:100px"
|
||||
@@ -19,7 +51,8 @@ but collects information on dropped files and raises corresponding events instea
|
||||
</div>
|
||||
```
|
||||
|
||||
It is possible controlling when upload behaviour is enabled/disabled by binding directive to a `boolean` value or expression:
|
||||
You can enable or disable upload functionality by binding the directive to a boolean
|
||||
value or expression:
|
||||
|
||||
```html
|
||||
<div [adf-upload]="true">...</div>
|
||||
@@ -27,37 +60,14 @@ It is possible controlling when upload behaviour is enabled/disabled by binding
|
||||
<div [adf-upload]="isUploadEnabled()">...</div>
|
||||
```
|
||||
|
||||
You can decorate any element including buttons, for example:
|
||||
|
||||
```html
|
||||
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
|
||||
Upload photos
|
||||
</button>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| enabled | `boolean` | `true` | Enables/disables uploading. |
|
||||
| data | `any` | | Data to upload. |
|
||||
| mode | `string[]` | `['drop']` | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. |
|
||||
| multiple | `boolean` | | Toggles multiple file uploads. |
|
||||
| accept | `string` | | (Click mode only) MIME type filter for files to accept. |
|
||||
| directory | `boolean` | | (Click mode only) Toggles uploading of directories. |
|
||||
|
||||
## Details
|
||||
|
||||
Used by attaching to an element or component.
|
||||
|
||||
### Modes
|
||||
|
||||
Directive supports several modes:
|
||||
The Upload directive supports two modes:
|
||||
|
||||
- **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
|
||||
- **click** mode, where decorated element invokes File Dialog to select files or folders.
|
||||
- **drop** mode, where the decorated element acts like a drop zone for files (enabled by default)
|
||||
- **click** mode, where the decorated element invokes a file dialog to select files or folders.
|
||||
|
||||
It is also possible combining modes together.
|
||||
You can also use both modes together:
|
||||
|
||||
```html
|
||||
<div [adf-upload]="true" mode="['click']">...</div>
|
||||
@@ -67,7 +77,7 @@ It is also possible combining modes together.
|
||||
|
||||
#### Click mode
|
||||
|
||||
For the click mode you can provide additional attributes for the File Dialog:
|
||||
In click mode you can provide extra attributes for the file dialog:
|
||||
|
||||
- **directory**, enables directory selection
|
||||
- **multiple**, enables multiple file/folder selection
|
||||
@@ -89,12 +99,14 @@ For the click mode you can provide additional attributes for the File Dialog:
|
||||
|
||||
#### Drop mode
|
||||
|
||||
For the moment upload directive supports only Files (single or multiple).
|
||||
Support for Folders and `accept` filters is subject to implement.
|
||||
Currently, the upload directive supports only file drops (single or multiple).
|
||||
Support for folders and `accept` filters will probably be implemented in a
|
||||
future version.
|
||||
|
||||
### Events
|
||||
|
||||
Once a single or multiple files are dropped on the decorated element the `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) is raised.
|
||||
The `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)
|
||||
is emitted when single or multiple files are dropped on the decorated element.
|
||||
The DOM event is configured to have `bubbling` enabled, so any component up the component tree can handle, process or prevent it:
|
||||
|
||||
```html
|
||||
@@ -111,9 +123,12 @@ onUploadFiles(e: CustomEvent) {
|
||||
}
|
||||
```
|
||||
|
||||
Please note that event will be raised only if valid [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) were dropped onto the decorated element.
|
||||
Note that the event will be emitted only if valid
|
||||
[files](https://developer.mozilla.org/en-US/docs/Web/API/File)
|
||||
are dropped onto the decorated element.
|
||||
|
||||
The `upload-files` event is cancellable, so you can stop propagation of the drop event to upper levels in case it has been already handled by your code:
|
||||
The `upload-files` event is cancellable, so you can stop propagation of the drop event upwards
|
||||
when it has been handled by your code:
|
||||
|
||||
```ts
|
||||
onUploadFiles(e: CustomEvent) {
|
||||
@@ -124,10 +139,10 @@ onUploadFiles(e: CustomEvent) {
|
||||
}
|
||||
```
|
||||
|
||||
It is also possible attaching arbitrary data to each event in order to access it from within external event handlers.
|
||||
A typical scenario is data tables where you may want to handle also the data row and/or underlying data to be accessible upon files drop.
|
||||
You can also attach arbitrary data to each event which you can then access from external event handlers. A typical scenario is with data tables where you may want to make use of the data row
|
||||
or make underlying data accessible when files are dropped.
|
||||
|
||||
You may be using `adf-upload-data` to bind custom values or objects for every event raised:
|
||||
You can use `adf-upload-data` to bind custom values or objects for every event raised:
|
||||
|
||||
```html
|
||||
<div [adf-upload]="true" [adf-upload-data]="dataRow"></div>
|
||||
@@ -136,7 +151,8 @@ You may be using `adf-upload-data` to bind custom values or objects for every ev
|
||||
<div [adf-upload]="true" [adf-upload-data]="getUploadData()"></div>
|
||||
```
|
||||
|
||||
As part of the `details` property of the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) you can get access to the following:
|
||||
You can access the following items of the `details` property from the
|
||||
[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent):
|
||||
|
||||
```ts
|
||||
detail: {
|
||||
@@ -148,9 +164,10 @@ detail: {
|
||||
|
||||
### Styling
|
||||
|
||||
The decorated element gets `adf-upload__dragging` CSS class name in the class list every time files are dragged over it.
|
||||
This allows changing look and feel of your components in case additional visual indication is required,
|
||||
for example you may want drawing a dashed border around the table row on drag:
|
||||
The decorated element is styled with the `adf-upload__dragging` CSS class whenever a file is dragged
|
||||
over it. This lets you change the look and feel of your components when you need different visual
|
||||
indication. For example, you could draw a dashed border around a table row when an item is dragged
|
||||
onto it:
|
||||
|
||||
```html
|
||||
<table>
|
||||
|
||||
Reference in New Issue
Block a user