048572946c
* v3.20.2...v3.24.0 * Fix handle undefined outlet in route component * Don't use template helper for optional modal.open Using the optional-helper here will trigger a computation in the same runloop error. This is because we are setting the `modal`-property when the `<Ref>` component gets rendered which will update the `this.modal`-property which will then recompute the `optional`-helper leading to this error. Instead we will create an action that will call the `open`-method on the modal when it is defined. This gets rid of the double computation error as we will not access the modal property twice in the same runloop when `modal` is getting set. * Fix - fn needs to be passed function tab-nav We create functions in the component file instead so that fn-helper stops complaining about the need to pass a function. * Update ember-exam to 6.1 version "Makes it compatible" with ember-qunit v5 * scheduleOnce setMaxHeight paged-collection We need to schedule to get around double-computation error. * Fix - model.data is removed from ember-data This has been private API all along - we need to work around the removal. Reference: https://github.com/emberjs/data/pull/7338/files#diff-9a8746fc5c86fd57e6122f00fef3155f76f0f3003a24b53fb7c4621d95dcd9bfL1310 * Fix `propContains` instead of `deepEqual` policy Recent model.data works differently than iterating attributes. We use `propContains` instead of `deepEqual`. We are only interested in the properties we assert against and match the previous behavior with this change. * Fix `propContains` instead of `deepEqual` token * Better handling single-records repo test-helper `model.data` has been removed we need to handle proxies and model instances differently. * Fix remaining repository tests with propContains We don't want to match entire objects - we don't care about properties we haven't defined in the assertion. * Don't use template helper for optional modal.open Using a template helper will give us a recomputation error - we work around it by creating an explicit action on the component instead. * Await `I $verb the $pageObject object` step * Fix no more customization ember-can No need to customize, the helper handles destruction fine on its own. * Fix - don't pass `optional` functions to fn We will declare the functions on the component instead. This gives us the same behavior but no error from `fn`, which expects a function to be passed. * Fix - handle `undefined` state on validate modifier StateChart can yield out an undefined `state` we need to handle that in the validate modifier * Fix linting errors tests directory * Warn / turn off new ember linting issues We will tackle them one by one and don't want to autofix issues that could be dangerous to auto-fix. * Auto-fix linting issues * More linting configuration * Fix remaining linting issues * Fix linting issues new files after rebase * ui: Remove ember-cli-uglify config now we are using terser (#14574) Co-authored-by: John Cowen <johncowen@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| announcer | ||
| title | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
# Route
The `Route` component should be used for the top-level component for *every*
route/page template. It provides/will provide functionality (along with the
`<Outlet />` component) for setting and announcing the title of the page,
passing data down through the route/template hierarchy, automatic
orchestration of nested routing and visual animating/transitioning between
routes.
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `String` | `undefined` | The name of the route in ember routeName format e.g. `dc.services.index`. This is generally the `routeName` variable that is available to you in all Consul UI route/page level templates.|
| `title` | `String` | `undefined` | Deprecated: The title for this page (eventually passed through to the `{{page-title}}` helper. This argument should be omitted if a title change isn't required. Also see the exported `<Title />` component which is now preferred |
| `titleSeparator` | `String` | `undefined` | Deprecated: This can be used in the top-level route to configure the separator for the `{{page-title}}` helper. Also see the exported `<Title />` component which is now preferred |
## Exports
| export | Type | Default | Description |
| --- | --- | --- | --- |
| `model` | `Object` | `undefined` | Arbitrary hash of data passed down from the parent route/outlet |
| `params` | `Object` | `undefined` | An object/merge of **all** optional route params and normal route params |
| `Title` | `Component` | `` | An inline component to allow you to set a title within the Route component |
| `Announcer` | `Component` | `` | An inline component to allow you to specify where the route announcer is rendered. This should be at the very top of your app probably under your `<Route />` in `application.hbs` |
```hbs
<!-- application.hbs -->
<Route
@name={{routeName}}
as |route|>
<route.Announcer />
...
</Route>
<!-- All route templates that change the title -->
<Route
@name={{routeName}}
as |route|>
<h1><route.Title @title="Page Title" /></h1>
{{route.model.dc.Name}}
</Route>
```
Every page/route template has a `routeName` variable exposed specifically to
allow you to use this to set the `@name` of the route.
The `<Title @title=""/>` component should be used to control the title of the page. This component also yields the value of the `@title` attribute allowing you to use it to avoid repeating the title of the page for things like reusing the same value for a `<h1>`. The `Title` component is one of the only components which uses an attribute to specify textual copy, this makes it hard to add further HTML elements to the value of `@title` which would not be supported in the HTML `<title>` element.