Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- `SearchableList`: The item keys `experimental` and `deprecated` lead to a different rendering.
- `Collection`: Slot property `mapOptions` added.
- `Collection`, `FileFormat`, `Process`, `ServiceType` and `UdfRuntime`: Slots pass through the props from the component.
- `Collection`, `FileFormat`, `Process`, `ServiceType` and `UdfRuntime`: Slots pass through all the props from the component (except `spatial-extents` and `temporal-extents` in `Collection`).
- `Collections`, `FileFormats`, `Processes`, `SearchableList`, `ServiceTypes` and `UdfRuntimes`:
- Events `headingToggled` and `detailsToggled` have been introduced
- Slot properties are passed through for slots that are made available in the sub-components (e.g. `Collection`)
Expand All @@ -82,7 +82,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added
- `SearchBox` component
- `Collections`, `FileFormats`, `Processes`, `SearchableList`, `ServiceTypes` and `UdfRuntimes`: Property `collapse` has been introduced
- `Collections`, `FileFormats`, `Processes`, `SearchableList`, `ServiceTypes` and `UdfRuntimes`: Property `collapsed` has been introduced
- `Collections`: Added slots `collection-before-description`, `collection-end`, `collection-spatial-extents`, `collection-temporal-extents` and `summary`
- `FileFormats`: Added slots `file-format-before-description`, `file-format-end` and `summary`
- `Processes`: Added slots `process-before-description`, `process-end` and `summary`
Expand Down
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ The components are async web components, which means only the components you are

### Vue

In a Vue environment, you can just import the Single File Components directly.
In a Vue environment, you can just import the Single File Components (SFC) directly. I.e., they must be imported from the `components` folder as demonstrated below.

First, you need to install the package: `npm install @openeo/vue-components --save`
Now, you can import the Vue components with the `import` or `require`, depending on the module system you are using.
Expand All @@ -89,10 +89,10 @@ For example, the [`Capabilities`](#capabilities) component can be imported as fo

Afterwards, you need to declare the component in the `components` section of your SFC, e.g. `components: { Capabilities }`.

In the Template of your SFC you can now include the component as shown in the example below. Please note that `url` and `capabilities` must be defined in the SFC, e.g. in `data` property or as `computed` property.
In the Template of your SFC you can now include the component as shown in the example below. Please note that the values `myUrl` and `myCapabilities` must be defined in the SFC, e.g. in the `data` property or as a `computed` property.

```html
<Capabilities :url="url" :capabilities="capabilities"></Capabilities>
<Capabilities :url="myUrl" :capabilities="myCapabilities"></Capabilities>
```

*Note for Contributors*: This usage mode doesn't require the initial build step `npm run build`. The Vue Components can simply be imported from the `components` folder. You can also serve examples via HTTP with the command `npm run serve`.
Expand Down Expand Up @@ -419,7 +419,7 @@ A template to implement searchable, sortable and collapsible lists (all optional
- `data` (array\<object>|object, required): The data to show in the list. Usually an array, but if an object is given the key of the elements is used as the default identifier. Each value of the array or object must be an object.
- `identifierKey` / `identifier-key` (string|null): The key in the object to use as identifiers (first line of the list). If not `null`, overrides the default identifier set from object keys. Defaults to `id`.
- `summaryKey` / `summary-key` (string|null): The key in the object to use as summary (second line of the list). If set to `null`, no summary is shown. Defaults to `summary`.
- `externalSearchTerm` / `external-search-term` (string|null): Pass a string if a search term is injected from an external source and no search box should be shown. Default to `null`, which will show a search box in the component itself so that users can filter the data by identifier and summary.
- `externalSearchTerm` / `external-search-term` (string|null): Pass a string if a search term is injected from an external source and no search box should be shown. Setting to the empty string `""` effectively disables searching. Defaults to `null`, which will show a search box in the component itself so that users can filter the data by identifier and summary.
- `searchPlaceholder` / `search-placeholder` (string): A text to show as a placeholder in the search box. Defaults to `Search`.
- `sort` (boolean): Sort the data by identifier. Defaults to `true`.
- `offerDetails` / `offer-details` (boolean): If set to `false`, the data can't be expanded and no details will be shown. Defaults to `true`, which will show what has been defined in the `details` slot after a user has expanded the element.
Expand Down Expand Up @@ -758,4 +758,4 @@ A list of categorized features with their corresponding endpoints as used by the
* `htmlentities_decode(string str) -> string`: Replace the HTML entities for `"`, `'`, `<` and `>` with their respective characters.
* `prettifyAbbreviation(string str) -> string`: Converts a string to uppercase if all letters given are lower-cased.
* `prettifyString(string str) -> string`: Tries to convert strings in snake-case, camel-case or kebab-case into more human-readable texts, mostly by adding spaces.
* and other functions not meant for public use.
* and other functions not meant for public use.