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> |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
# Outlet
The `Outlet` component should be used to wrap *every* ember `{{outlet}}`. It
provides/will provide functionality (along with the `<Route />` 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.|
| `model` | `Object` | `undefined` | Arbitrary hash of data to pass down to the child route (available in the `<Route as |route|>` export). |
```hbs
<Outlet
@name={{routeName}}
@model={{hash
dc=(hash
Name="dc-1"
)
}}
>
{{outlet}}
</Outlet>
```
Currently, using the `<Outlet />` component means that every single page/route
template is wrapped in a HTML `<section>` element. This `<section>` element
has various data attributes attached to indiciate the loading state of the
outlet. These can be used to specifically target every individual outlet via
CSS.
## Attributes
| Data Attribute | Description |
| --- | --- |
| `data-outlet` | The name of this outlet in ember routeName format e.g. `dc.services.index` |
| `data-route` | The name of the current child route of this outlet in ember routeName format e.g. `dc.services.show` |
| `data-state` | The current state of this outlet, `idle` or `loading` |
| `data-transition` | A combination of `idle` and `loading` states |