lit-ui-router 1.9.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core.d.ts.map +1 -1
- package/dist/core.js +2 -1
- package/dist/core.js.map +1 -1
- package/dist/ui-sref-active.d.ts +156 -3
- package/dist/ui-sref-active.d.ts.map +1 -1
- package/dist/ui-sref-active.js +41 -4
- package/dist/ui-sref-active.js.map +1 -1
- package/dist/ui-sref.d.ts +79 -3
- package/dist/ui-sref.d.ts.map +1 -1
- package/dist/ui-sref.js +69 -15
- package/dist/ui-sref.js.map +1 -1
- package/package.json +1 -1
- package/src/core.ts +44 -35
- package/src/ui-sref-active.ts +243 -1
- package/src/ui-sref.ts +206 -29
package/dist/core.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.d.ts","mappings":"AAAA,SAGE,UAIA,aACA,UACA,YAEA,wBACK;AAGP,SACE,kBACA,oBACA,4BACA,8BAEA,2BACA,2BACK;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"core.d.ts","mappings":"AAAA,SAGE,UAIA,aACA,UACA,YAEA,wBACK;AAGP,SACE,kBACA,oBACA,4BACA,8BAEA,2BACA,2BACK;;;;;;;;;AA2BP,OAAO,cAAM,yBAAyB,WAAW;CAY7C,MAAa;CACb,UAAiB;;CAXnB;;CAEA;;;;;;CAOA,YACE,AAAO,MAAM,YACb,AAAO,UAAU;;;;;CAOnB,QAAQ;AAGV;;;;;;;;;;;;;AAcA,OAAO,iBAAS,6BACd,UAAU,sBAAsB,qBAEhC,QAAQ,mBAAmB,KAC1B,UAAU,2BAA2B,KAAK,0BAA0B;;;;;;;;AAWvE,OAAO,iBAAS,mBACd,UAAU,sBAAsB,qBAChC,sBAAsB,aAAa,iBAAiB;;;;;;;;;;;;;;AAiBtD,OAAO,iBAAS,gBACd,UAAU,sBAAsB,qBAChC,OAAO,cAAc,eAAe,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGnE,OAAO,cAAM,oBAAoB,SAAS;;;;;;;;;CASxC;;CASA,QAAQ;;;;;;;;;;;;;;;;;CAkBR;AAUF","names":[],"ignoreList":[],"sources":["../src/core.ts"]}
|
package/dist/core.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { forEach, isFunction, pick, servicesPlugin, UIRouter, ViewService } from "@uirouter/core";
|
|
2
2
|
import { html, LitElement } from "lit";
|
|
3
|
+
const forEachValue = forEach;
|
|
3
4
|
let viewConfigIdCounter = 0;
|
|
4
5
|
export class LitViewConfig {
|
|
5
6
|
constructor(path, viewDecl) {
|
|
@@ -20,7 +21,7 @@ export function isRoutedLitElement(component) {
|
|
|
20
21
|
}
|
|
21
22
|
export function litViewsBuilder(state) {
|
|
22
23
|
const views = {}, viewsObject = state.views || { $default: pick(state, ["component"]) };
|
|
23
|
-
|
|
24
|
+
forEachValue(viewsObject, function(config, name) {
|
|
24
25
|
let normalizedConfig;
|
|
25
26
|
name = name || "$default";
|
|
26
27
|
if (isLitViewDeclarationTemplate(config)) {
|
package/dist/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","mappings":"AAAA,SACE,SACA,YAEA,MACA,gBAGA,UAEA,mBAEK;AACP,SAAS,MAAM,kBAAkB;
|
|
1
|
+
{"version":3,"file":"core.js","mappings":"AAAA,SACE,SACA,YAEA,MACA,gBAGA,UAEA,mBAEK;AACP,SAAS,MAAM,kBAAkB;AAkBjC,MAAM,eAAe;AASrB,IAAI,sBAAsB;AAU1B,OAAO,MAAM,cAAoC;CAW/C,YACE,MACA,UACA;EAFO;EACA;aAXK;gBAEL;CAUN;CAMH,OAAsB;EACpB,OAAO,QAAQ,QAAQ,IAAI;CAC7B;AACF;AAcA,OAAO,SAAS,6BAGd,QACwE;CACxE,OAAO,WAAW,MAAM;AAC1B;AASA,OAAO,SAAS,mBAEd,WAAuD;CACvD,OAAQ,WAAsC,qBAAqB;AACrE;AAeA,OAAO,SAAS,gBAEd,OAAqE;CACrE,MAAM,QAAyD,CAAC,GAC9D,cAAc,MAAM,SAAS,EAC3B,UAAU,KAAK,OAAO,CAAC,WAAW,CAAC,EACrC;CAEF,aACE,aACA,SAAU,QAA+B,MAAc;EACrD,IAAI;EACJ,OAAO,QAAQ;EACf,IAAI,6BAAgC,MAAM,GAAG;GAC3C,mBAAmB,EAAE,WAAW,OAAqC;EACvE,OAAO;GACL,mBAAmB;EACrB;EACA,IAAI,OAAO,KAAK,oBAAoB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG;EAEtD,iBAAiB,QAAQ;EACzB,iBAAiB,WAAW;EAC5B,iBAAiB,QAAQ;EAEzB,MAAM,mBAAmB,YAAY,sBACnC,iBAAiB,UACjB,iBAAiB,KACnB;EACA,iBAAiB,cAAc,iBAAiB;EAChD,iBAAiB,uBACf,iBAAiB;EAEnB,IAAI,mBAAsB,iBAAiB,SAAS,GAAG;GACrD,MAAM,YAAY,iBAAiB;GACnC,IAAI;GACJ,iBAAiB,aAAa,UAAkC;IAC9D,YAAa,UAAU,UAAU,aAAc,IAAI,UAAU,KAAK;IAClE,UAAU,eAAe;IACzB,OAAO,IAAI,GAAG;GAChB;EACF;EAEA,MAAM,QAAQ,YAAY,QAAQ;CACpC,CACF;CACA,OAAO;AACT;AAMA,MAAM,qBAAqB,MAAkB,WAC3C,IAAI,cAAc,MAAM,MAAM;AAiDhC,OAAO,MAAM,oBAAoB,SAAS;CASxC,cAAc;EACZ,MAAM;iBAQU;EAPhB,KAAK,OAAuB,cAAc;EAE1C,KAAK,YAAY,WAAW,mBAAmB,OAAO,iBAAiB;EACvE,KAAK,cAAc,UAAU,SAAS,eAAe;CACvD;CAqBA,QAAc;EACZ,IAAI,KAAK,SAAS;GAChB,MAAM,IAAI,MAAM,+BAA+B;EACjD;EAEA,KAAK,kBAAkB,KAAK;EAC5B,KAAK,WAAW,OAAO;EACvB,KAAK,WAAW,KAAK;EACrB,KAAK,UAAU;CACjB;AACF","names":[],"ignoreList":[],"sources":["../src/core.ts"]}
|
package/dist/ui-sref-active.d.ts
CHANGED
|
@@ -55,6 +55,37 @@ export interface SrefStatus {
|
|
|
55
55
|
/** @internal */
|
|
56
56
|
export declare function mergeSrefStatus(left: SrefStatus, right: SrefStatus): SrefStatus;
|
|
57
57
|
/**
|
|
58
|
+
* Valid `aria-current` token values.
|
|
59
|
+
*
|
|
60
|
+
* @see {@link UiSrefActiveParams.ariaCurrentValue}
|
|
61
|
+
* @see [WAI-ARIA `aria-current`](https://www.w3.org/TR/wai-aria-1.2/#aria-current)
|
|
62
|
+
*
|
|
63
|
+
* @category types
|
|
64
|
+
*/
|
|
65
|
+
export type AriaCurrentValue = "page" | "step" | "location" | "date" | "time" | "true";
|
|
66
|
+
/**
|
|
67
|
+
* Per-state `aria-current` values, for the rare nav that wants to mark an
|
|
68
|
+
* ancestor as well as the current page.
|
|
69
|
+
*
|
|
70
|
+
* Unlike `activeClasses` and `exactClasses` — which both land in `class` when a
|
|
71
|
+
* link is exactly active — `aria-current` is one attribute with one value, so
|
|
72
|
+
* these do not combine: on an exactly-active element `exact` wins and `active`
|
|
73
|
+
* is not consulted. Each key falls back to its own default when omitted.
|
|
74
|
+
*
|
|
75
|
+
* @see {@link UiSrefActiveParams.ariaCurrentValue}
|
|
76
|
+
*
|
|
77
|
+
* @category types
|
|
78
|
+
*/
|
|
79
|
+
export interface AriaCurrentValues {
|
|
80
|
+
/** Applied when the exact state is active. Defaults to `'page'` on links. */
|
|
81
|
+
exact?: AriaCurrentValue | false;
|
|
82
|
+
/**
|
|
83
|
+
* Applied when a child state is active but this one is not the exact match —
|
|
84
|
+
* `'location'` is the token meant for this. Defaults to `false`.
|
|
85
|
+
*/
|
|
86
|
+
active?: AriaCurrentValue | false;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
58
89
|
* Parameters for the uiSrefActive directive.
|
|
59
90
|
*
|
|
60
91
|
* @see {@link uiSrefActive}
|
|
@@ -66,6 +97,24 @@ export interface UiSrefActiveParams {
|
|
|
66
97
|
activeClasses: string[];
|
|
67
98
|
/** CSS classes to add only when the exact state is active */
|
|
68
99
|
exactClasses: string[];
|
|
100
|
+
/**
|
|
101
|
+
* The `aria-current` value to set when the **exact** state is active — the
|
|
102
|
+
* same binding Vue Router's `ariaCurrentValue` uses.
|
|
103
|
+
*
|
|
104
|
+
* Defaults to `'page'` on link elements (`<a>`, `<area>`, `[role="link"]`).
|
|
105
|
+
* Pass a value explicitly to apply it to any element; pass `false` to leave
|
|
106
|
+
* `aria-current` untouched.
|
|
107
|
+
*
|
|
108
|
+
* Pass an object to also mark ancestors, which is otherwise off:
|
|
109
|
+
* `{ exact: 'page', active: 'location' }`. See {@link AriaCurrentValues} —
|
|
110
|
+
* the two do not combine the way `activeClasses` and `exactClasses` do.
|
|
111
|
+
*
|
|
112
|
+
* The directive only removes an `aria-current` it set itself, so a value
|
|
113
|
+
* authored in the template survives until the directive first writes one of
|
|
114
|
+
* its own — after that it owns the attribute and clears it when inactive,
|
|
115
|
+
* warning once. Use `false` to keep an authored value for good.
|
|
116
|
+
*/
|
|
117
|
+
ariaCurrentValue?: AriaCurrentValue | false | AriaCurrentValues;
|
|
69
118
|
/** The state name to check for active status */
|
|
70
119
|
state: string;
|
|
71
120
|
/** State parameters to match */
|
|
@@ -103,6 +152,23 @@ export declare class UiSrefActiveDirective extends AsyncDirective {
|
|
|
103
152
|
seekParentView(): void;
|
|
104
153
|
activeClasses: string[];
|
|
105
154
|
exactClasses: string[];
|
|
155
|
+
/** undefined = default (on for link elements) */
|
|
156
|
+
ariaCurrentValue: AriaCurrentValue | false | AriaCurrentValues | undefined;
|
|
157
|
+
/**
|
|
158
|
+
* Whether the `aria-current` currently on the element was written by this
|
|
159
|
+
* directive. Guards against clearing one authored in the template.
|
|
160
|
+
*
|
|
161
|
+
* @internal
|
|
162
|
+
*/
|
|
163
|
+
private ownsAriaCurrent;
|
|
164
|
+
/**
|
|
165
|
+
* Whether the takeover warning has already been emitted. Instance state
|
|
166
|
+
* rather than a module-level element registry: the directive instance already
|
|
167
|
+
* lives as long as its part, so this costs nothing extra and pins nothing.
|
|
168
|
+
*
|
|
169
|
+
* @internal
|
|
170
|
+
*/
|
|
171
|
+
private warnedAriaCurrentTakeover;
|
|
106
172
|
state: string | undefined;
|
|
107
173
|
params: RawParams;
|
|
108
174
|
options: TransitionOptions;
|
|
@@ -119,7 +185,39 @@ export declare class UiSrefActiveDirective extends AsyncDirective {
|
|
|
119
185
|
/** @internal */
|
|
120
186
|
constructor(partInfo: PartInfo);
|
|
121
187
|
/** @internal */
|
|
122
|
-
render({ activeClasses, exactClasses }: Partial<UiSrefActiveParams>): typeof noChange;
|
|
188
|
+
render({ activeClasses, exactClasses, ariaCurrentValue }: Partial<UiSrefActiveParams>): typeof noChange;
|
|
189
|
+
/**
|
|
190
|
+
* Resolves one `aria-current` value for the element's current state, or
|
|
191
|
+
* `false` for none.
|
|
192
|
+
*
|
|
193
|
+
* `exact` and `active` are branches of a single decision here, not the union
|
|
194
|
+
* `classList` gets: an exactly-active element takes the `exact` value and
|
|
195
|
+
* never falls through to `active`.
|
|
196
|
+
*
|
|
197
|
+
* @internal
|
|
198
|
+
*/
|
|
199
|
+
private resolveAriaCurrent;
|
|
200
|
+
/**
|
|
201
|
+
* Writes, rewrites, or clears `aria-current`.
|
|
202
|
+
*
|
|
203
|
+
* Resolving to a single value first is what keeps "no opinion", "explicitly
|
|
204
|
+
* off" and "not applicable" from each needing their own branch here.
|
|
205
|
+
*
|
|
206
|
+
* @internal
|
|
207
|
+
*/
|
|
208
|
+
private applyAriaCurrent;
|
|
209
|
+
/**
|
|
210
|
+
* Warns the first time this directive takes over an `aria-current` it did not
|
|
211
|
+
* write. Taking over is deliberate — restoring the previous value when the
|
|
212
|
+
* state goes inactive would leave an inactive link asserting
|
|
213
|
+
* `aria-current="page"` — but it is silent, and the loss only surfaces a
|
|
214
|
+
* navigation later, so it is worth naming once.
|
|
215
|
+
*
|
|
216
|
+
* Development builds only, like `uiSref`'s `assignHref` warning.
|
|
217
|
+
*
|
|
218
|
+
* @internal
|
|
219
|
+
*/
|
|
220
|
+
private warnAriaCurrentTakeover;
|
|
123
221
|
/** @internal */
|
|
124
222
|
getOptions(): TransitionOptions;
|
|
125
223
|
/**
|
|
@@ -132,7 +230,7 @@ export declare class UiSrefActiveDirective extends AsyncDirective {
|
|
|
132
230
|
*/
|
|
133
231
|
getSrefStatus(event: TransEvt | undefined, srefTarget: TargetState): SrefStatus;
|
|
134
232
|
/** @internal */
|
|
135
|
-
update(part: ElementPart, [{ activeClasses, exactClasses, state, params, options, targetStates }]: [UiSrefActiveParams]): Promise<void>;
|
|
233
|
+
update(part: ElementPart, [{ activeClasses, exactClasses, ariaCurrentValue, state, params, options, targetStates }]: [UiSrefActiveParams]): Promise<void>;
|
|
136
234
|
/** @internal */
|
|
137
235
|
doRender: () => typeof noChange;
|
|
138
236
|
/** @internal */
|
|
@@ -162,8 +260,14 @@ export declare class UiSrefActiveDirective extends AsyncDirective {
|
|
|
162
260
|
* both "active" classes (applied when the state or any child state is active)
|
|
163
261
|
* and "exact" classes (applied only when the exact state is active).
|
|
164
262
|
*
|
|
263
|
+
* On link elements (`<a>`, `<area>`, `[role="link"]`) it also sets
|
|
264
|
+
* `aria-current="page"` while the *exact* state is active, and removes the
|
|
265
|
+
* attribute otherwise, so assistive technology gets the same "you are here"
|
|
266
|
+
* signal as the active CSS class. Other elements opt in by passing
|
|
267
|
+
* `ariaCurrentValue` explicitly.
|
|
268
|
+
*
|
|
165
269
|
* **Arguments:**
|
|
166
|
-
* - `params` - Configuration object (see [[UiSrefActiveParams]]) with activeClasses, exactClasses, and optional state/params
|
|
270
|
+
* - `params` - Configuration object (see [[UiSrefActiveParams]]) with activeClasses, exactClasses, ariaCurrentValue, and optional state/params
|
|
167
271
|
*
|
|
168
272
|
* @example Basic usage with nested uiSref
|
|
169
273
|
* ```ts
|
|
@@ -201,6 +305,55 @@ export declare class UiSrefActiveDirective extends AsyncDirective {
|
|
|
201
305
|
* `
|
|
202
306
|
* ```
|
|
203
307
|
*
|
|
308
|
+
* @example Customizing or disabling `aria-current`
|
|
309
|
+
* ```ts
|
|
310
|
+
* html`
|
|
311
|
+
* <!-- a step in a multi-step flow -->
|
|
312
|
+
* <a ${uiSref('wizard.payment')}
|
|
313
|
+
* ${uiSrefActive({ activeClasses: ['active'], ariaCurrentValue: 'step' })}>
|
|
314
|
+
* Payment
|
|
315
|
+
* </a>
|
|
316
|
+
*
|
|
317
|
+
* <!-- opt a non-link element in; 'auto' keeps href off it -->
|
|
318
|
+
* <tr ${uiSref('.message', { messageId }, { assignHref: 'auto' })}
|
|
319
|
+
* ${uiSrefActive({ activeClasses: ['active'], ariaCurrentValue: 'true' })}>
|
|
320
|
+
* </tr>
|
|
321
|
+
*
|
|
322
|
+
* <!-- leave aria-current alone: the app manages it, and a value written
|
|
323
|
+
* here survives in every routing state -->
|
|
324
|
+
* <a ${uiSref('home')}
|
|
325
|
+
* aria-current="page"
|
|
326
|
+
* ${uiSrefActive({ activeClasses: ['active'], ariaCurrentValue: false })}>
|
|
327
|
+
* Home
|
|
328
|
+
* </a>
|
|
329
|
+
*
|
|
330
|
+
* <!-- mark the ancestor section as well as the current page:
|
|
331
|
+
* at `users` -> aria-current="page", at `users.detail` -> "location" -->
|
|
332
|
+
* <a ${uiSref('users')}
|
|
333
|
+
* ${uiSrefActive({
|
|
334
|
+
* activeClasses: ['active'],
|
|
335
|
+
* ariaCurrentValue: { exact: 'page', active: 'location' },
|
|
336
|
+
* })}>
|
|
337
|
+
* Users
|
|
338
|
+
* </a>
|
|
339
|
+
*
|
|
340
|
+
* <!-- ...or mark only the ancestor, never the page itself -->
|
|
341
|
+
* <a ${uiSref('users')}
|
|
342
|
+
* ${uiSrefActive({
|
|
343
|
+
* activeClasses: ['active'],
|
|
344
|
+
* ariaCurrentValue: { exact: false, active: 'location' },
|
|
345
|
+
* })}>
|
|
346
|
+
* Users
|
|
347
|
+
* </a>
|
|
348
|
+
* `
|
|
349
|
+
* ```
|
|
350
|
+
*
|
|
351
|
+
* Only an `aria-current` this directive wrote is removed again. A template-authored
|
|
352
|
+
* value therefore survives right up until the directive first writes one of its own —
|
|
353
|
+
* from that point the directive owns the attribute and will clear it on the next
|
|
354
|
+
* inactive render. Pair a template-authored value with `ariaCurrentValue: false` to
|
|
355
|
+
* keep it for good.
|
|
356
|
+
*
|
|
204
357
|
* @example Explicit state (without nested uiSref)
|
|
205
358
|
* ```ts
|
|
206
359
|
* html`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui-sref-active.d.ts","mappings":"AAAA,SAOE,WAGA,aACA,YACA,yBAEK;AACP,SAAS,UAAU,mBAAmB;AACtC,SAAoB,gBAA0B;AAC9C,cAAc,uBAAuB;AACrC,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAE5B,
|
|
1
|
+
{"version":3,"file":"ui-sref-active.d.ts","mappings":"AAAA,SAOE,WAGA,aACA,YACA,yBAEK;AACP,SAAS,UAAU,mBAAmB;AACtC,SAAoB,gBAA0B;AAC9C,cAAc,uBAAuB;AACrC,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAE5B,SAGE,eACA,yBAEK;AACP,SAAS,cAAc;;UAGb,SAAS;CACjB;CACA,OAAO;CACP,SAAS;AACX;;;;;AAMA,OAAO,cAAM,gCAAgC;;;;;AAM7C,oBAAY,sBAAsB;;CAEhC;;CAEA;;CAEA;AACF;;;;;;;;;;;;AAaA,iBAAiB,WAAW;;CAE1B;;CAEA;;CAEA;;CAEA;;CAEA,cAAc;AAChB;;AAgDA,OAAO,iBAAS,gBACd,MAAM,YACN,OAAO,aACN;;;;;;;;;AAkBH,YAAY,mBACR,SACA,SACA,aACA,SACA,SACA;;;;;;;;;;;;;;AAeJ,iBAAiB,kBAAkB;;CAEjC,QAAQ,mBAAmB;;;;;CAK3B,SAAS,mBAAmB;AAC9B;;;;;;;;AAoCA,iBAAiB,mBAAmB;;CAElC;;CAEA;;;;;;;;;;;;;;;;;;CAkBA,mBAAmB,mBAAmB,QAAQ;;CAE9C;;CAEA,SAAS;;CAET,UAAU;;CAEV,cAAc;AAChB;KAKK;;;;;;;;;;;;;;;;;;AAmBL,OAAO,cAAM,8BAA8B,eAAe;CACxD,SAAS;CAET,UAAU;;CAEV;CAIA,YAAY;;CAEZ;CAIA;CACA;;CAEA,kBAAkB,mBAAmB,QAAQ;;;;;;;CAO7C,QAAQ;;;;;;;;CAQR,QAAQ;CAER;CACA,QAAQ;CACR,SAAS;CAET;CACA;CACA;CACA;CAEA,cAAc,IAAI;CAClB,SAAS,QAAQ,aAAa;;CAM9B,oBAAoB;;CAEpB,4BAA4B;;CAG5B,YAAY,UAAU;;CAYtB,OAAO,EACL,eACA,cACA,oBACC,QAAQ,6BAA6B;;;;;;;;;;;CAmCxC,QAAQ;;;;;;;;;CAoBR,QAAQ;;;;;;;;;;;;CA8BR,QAAQ;;CAmBR,cAAc;;;;;;;;;CAed,cACE,OAAO,sBACP,YAAY,cACX;;CAiDH,AAAM,OACJ,MAAM,aACN,CACE,EACE,eACA,cACA,kBACA,OACA,QACA,SACA,kBAEA,sBACH;;CAwBH,uBAAsB;;CAStB;;CAEA,aAAa,EAAE,gBAAgB,QAAQ;;CAkDvC;;CAkBA,iCACE,KAAK,uBACL,OAAO,aACN,YAAY;;CAcf,sBAAuB,OAAO;;CAO9B,0BAA2B,GAAG;;CAe9B,UAAU,WAAW,WAAW;;CAahC,oBAAqB,OAAO;;CAyB5B;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0HA,OAAO,cAAM,eACX,QAAQ,QAAQ,wBACb,uBAAuB","names":[],"ignoreList":[],"sources":["../src/ui-sref-active.ts"]}
|
package/dist/ui-sref-active.js
CHANGED
|
@@ -3,7 +3,7 @@ import { noChange } from "lit";
|
|
|
3
3
|
import { directive, PartType } from "lit/directive.js";
|
|
4
4
|
import { AsyncDirective } from "lit/async-directive.js";
|
|
5
5
|
import { UIRouterLitElement } from "./ui-router.js";
|
|
6
|
-
import { UI_SREF_TARGET_EVENT } from "./ui-sref.js";
|
|
6
|
+
import { inLitDevMode, isNativeLink, UI_SREF_TARGET_EVENT } from "./ui-sref.js";
|
|
7
7
|
import { UiView } from "./ui-view.js";
|
|
8
8
|
export const TRANSITION_STATE_CHANGE_EVENT = "transitionStateChange";
|
|
9
9
|
export let TransitionStateChange = function(TransitionStateChange) {
|
|
@@ -37,6 +37,8 @@ export function mergeSrefStatus(left, right) {
|
|
|
37
37
|
targetStates: [...left.targetStates, ...right.targetStates]
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
|
+
const isLinkElement = (element) => isNativeLink(element) || element.matches("[role~=\"link\"]");
|
|
41
|
+
const toAriaCurrentValues = (ariaCurrentValue) => typeof ariaCurrentValue === "object" ? ariaCurrentValue : { exact: ariaCurrentValue };
|
|
40
42
|
let _first = null;
|
|
41
43
|
export class UiSrefActiveDirective extends AsyncDirective {
|
|
42
44
|
seekRouter() {
|
|
@@ -51,6 +53,8 @@ export class UiSrefActiveDirective extends AsyncDirective {
|
|
|
51
53
|
this.parentView = null;
|
|
52
54
|
this.activeClasses = [];
|
|
53
55
|
this.exactClasses = [];
|
|
56
|
+
this.ownsAriaCurrent = false;
|
|
57
|
+
this.warnedAriaCurrentTakeover = false;
|
|
54
58
|
this.params = {};
|
|
55
59
|
this.options = {};
|
|
56
60
|
this.targetStates = new Set();
|
|
@@ -58,7 +62,8 @@ export class UiSrefActiveDirective extends AsyncDirective {
|
|
|
58
62
|
this.doRender = () => {
|
|
59
63
|
return this.render({
|
|
60
64
|
activeClasses: this.activeClasses,
|
|
61
|
-
exactClasses: this.exactClasses
|
|
65
|
+
exactClasses: this.exactClasses,
|
|
66
|
+
ariaCurrentValue: this.ariaCurrentValue
|
|
62
67
|
});
|
|
63
68
|
};
|
|
64
69
|
this._firstUpdated = false;
|
|
@@ -99,7 +104,7 @@ export class UiSrefActiveDirective extends AsyncDirective {
|
|
|
99
104
|
}
|
|
100
105
|
_first = _first || this;
|
|
101
106
|
}
|
|
102
|
-
render({ activeClasses, exactClasses }) {
|
|
107
|
+
render({ activeClasses, exactClasses, ariaCurrentValue }) {
|
|
103
108
|
if (!this._firstUpdated) {
|
|
104
109
|
return noChange;
|
|
105
110
|
}
|
|
@@ -117,8 +122,39 @@ export class UiSrefActiveDirective extends AsyncDirective {
|
|
|
117
122
|
this.element.classList.remove(className);
|
|
118
123
|
}
|
|
119
124
|
});
|
|
125
|
+
this.applyAriaCurrent(ariaCurrentValue);
|
|
120
126
|
return noChange;
|
|
121
127
|
}
|
|
128
|
+
resolveAriaCurrent(values) {
|
|
129
|
+
if (this.exact) {
|
|
130
|
+
return values.exact ?? (isLinkElement(this.element) && "page");
|
|
131
|
+
}
|
|
132
|
+
if (this.active) {
|
|
133
|
+
return values.active ?? false;
|
|
134
|
+
}
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
applyAriaCurrent(ariaCurrentValue) {
|
|
138
|
+
const resolved = this.resolveAriaCurrent(toAriaCurrentValues(ariaCurrentValue));
|
|
139
|
+
if (resolved) {
|
|
140
|
+
if (!this.ownsAriaCurrent) {
|
|
141
|
+
this.warnAriaCurrentTakeover();
|
|
142
|
+
}
|
|
143
|
+
this.element.setAttribute("aria-current", resolved);
|
|
144
|
+
this.ownsAriaCurrent = true;
|
|
145
|
+
} else if (this.ownsAriaCurrent) {
|
|
146
|
+
this.element.removeAttribute("aria-current");
|
|
147
|
+
this.ownsAriaCurrent = false;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
warnAriaCurrentTakeover() {
|
|
151
|
+
const existing = this.element.getAttribute("aria-current");
|
|
152
|
+
if (!inLitDevMode() || existing === null || this.warnedAriaCurrentTakeover) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
this.warnedAriaCurrentTakeover = true;
|
|
156
|
+
console.warn(`lit-ui-router: uiSrefActive is taking over an existing aria-current="${existing}" that it did not set; ` + "the attribute will be removed when the state goes inactive. " + "Pass ariaCurrentValue: false to keep the attribute under your own control.", this.element);
|
|
157
|
+
}
|
|
122
158
|
getOptions() {
|
|
123
159
|
const defaultOpts = { relative: this.parentView?.viewContext?.name };
|
|
124
160
|
return extend(defaultOpts, this.options || {});
|
|
@@ -142,9 +178,10 @@ export class UiSrefActiveDirective extends AsyncDirective {
|
|
|
142
178
|
};
|
|
143
179
|
return result;
|
|
144
180
|
}
|
|
145
|
-
async update(part, [{ activeClasses, exactClasses, state, params = {}, options = {}, targetStates }]) {
|
|
181
|
+
async update(part, [{ activeClasses, exactClasses, ariaCurrentValue, state, params = {}, options = {}, targetStates }]) {
|
|
146
182
|
this.activeClasses = activeClasses;
|
|
147
183
|
this.exactClasses = exactClasses;
|
|
184
|
+
this.ariaCurrentValue = ariaCurrentValue;
|
|
148
185
|
this.state = state;
|
|
149
186
|
this.params = params;
|
|
150
187
|
this.options = options;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui-sref-active.js","mappings":"AAAA,SACE,UACA,QACA,OAEA,WAIA,MAIA,eACK;AACP,SAAS,gBAA6B;AACtC,SAAS,WAAqB,gBAAgB;AAE9C,SAAS,sBAAsB;AAG/B,SAAS,0BAA0B;AACnC,
|
|
1
|
+
{"version":3,"file":"ui-sref-active.js","mappings":"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","names":[],"ignoreList":[],"sources":["../src/ui-sref-active.ts"]}
|
package/dist/ui-sref.d.ts
CHANGED
|
@@ -38,6 +38,63 @@ export interface UiSrefTargetEvent extends CustomEvent<{
|
|
|
38
38
|
*/
|
|
39
39
|
export declare function uiSrefTargetEvent(targetState: TargetState): UiSrefTargetEvent;
|
|
40
40
|
/**
|
|
41
|
+
* Directive options for {@link uiSref}, passed alongside the transition
|
|
42
|
+
* options in its third argument. These never reach `@uirouter/core`.
|
|
43
|
+
*
|
|
44
|
+
* @category types
|
|
45
|
+
*/
|
|
46
|
+
export interface UiSrefOptions {
|
|
47
|
+
/**
|
|
48
|
+
* Where the generated `href` is written.
|
|
49
|
+
*
|
|
50
|
+
* - `true` *(default in 1.x)* — always write it, whatever the element is.
|
|
51
|
+
* This is the historical behaviour and the standing answer for a custom
|
|
52
|
+
* element that declares its own `href`.
|
|
53
|
+
* - `'auto'` — write it only to elements the HTML spec gives an `href`:
|
|
54
|
+
* `<a>`, `<area>`, and SVG `<a>`. This is the correct behaviour and
|
|
55
|
+
* becomes the default in 2.0.
|
|
56
|
+
* - `false` — never write it; the app manages the attribute itself.
|
|
57
|
+
*
|
|
58
|
+
* Under `true`, a non-link that receives an `href` warns once and names
|
|
59
|
+
* `'auto'` as the fix.
|
|
60
|
+
*
|
|
61
|
+
* This option governs the `href` attribute **only**. Whether the click
|
|
62
|
+
* handler defers to native browser behaviour is decided by the element
|
|
63
|
+
* itself, never by this setting — see {@link isNativeLink}.
|
|
64
|
+
*/
|
|
65
|
+
assignHref?: boolean | "auto";
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* The third argument to {@link uiSref}: core's transition options plus this
|
|
69
|
+
* directive's own.
|
|
70
|
+
*
|
|
71
|
+
* @category types
|
|
72
|
+
*/
|
|
73
|
+
export type UiSrefTransitionOptions = TransitionOptions & UiSrefOptions;
|
|
74
|
+
/**
|
|
75
|
+
* Whether lit resolved to its development build. `enableWarning` is inherited
|
|
76
|
+
* from `ReactiveElement`, which declares it optional precisely because it
|
|
77
|
+
* exists only in development — lit's own docs prescribe guarding on it. Same
|
|
78
|
+
* shape in lit 2 and 3, and typed optional in both builds' `.d.ts`, so this
|
|
79
|
+
* needs no cast. Read per call, so import order cannot matter.
|
|
80
|
+
* @internal
|
|
81
|
+
*/
|
|
82
|
+
export declare function inLitDevMode(): boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Whether the element navigates on its own. `localName` is lowercase for HTML
|
|
85
|
+
* and SVG alike, so SVG `<a>` needs no namespace check.
|
|
86
|
+
*
|
|
87
|
+
* **Tag-based on purpose.** This decides where an `href` may be written, and
|
|
88
|
+
* `href` is a property of the tag, not of the role: `<div role="link" href="…">`
|
|
89
|
+
* is inert noise. `uiSrefActive`'s `isLinkElement` asks the neighbouring
|
|
90
|
+
* *role*-based question for `aria-current`, which `<div role="link">`
|
|
91
|
+
* legitimately takes. The two overlap on `<a>`/`<area>` and nowhere else — do
|
|
92
|
+
* not unify them.
|
|
93
|
+
*
|
|
94
|
+
* @internal
|
|
95
|
+
*/
|
|
96
|
+
export declare function isNativeLink(element: Element): boolean;
|
|
97
|
+
/**
|
|
41
98
|
* Directive class that creates state-based navigation links.
|
|
42
99
|
*
|
|
43
100
|
* This directive is used internally by the {@link uiSref} directive function.
|
|
@@ -57,14 +114,24 @@ export declare class UiSrefDirective extends AsyncDirective {
|
|
|
57
114
|
element: UiSrefElement | null;
|
|
58
115
|
uiRouter: UIRouterLit | undefined;
|
|
59
116
|
parentView: UiView | null;
|
|
117
|
+
/** this directive's own options, stripped from the transition options */
|
|
118
|
+
uiSrefOptions: UiSrefOptions;
|
|
60
119
|
href: string | null;
|
|
61
120
|
targetState: TargetState | null;
|
|
121
|
+
/** whether the href currently on the element was written by us */
|
|
122
|
+
private _ownsHref;
|
|
62
123
|
/** @internal */
|
|
63
124
|
unsubscribe: (() => void) | undefined;
|
|
64
125
|
/** @internal */
|
|
65
126
|
constructor(partInfo: PartInfo);
|
|
66
127
|
getOptions(opts?: TransitionOptions): TransitionOptions;
|
|
67
128
|
render(state: string, params?: RawParams, options?: TransitionOptions): typeof noChange;
|
|
129
|
+
/**
|
|
130
|
+
* Whether this render writes the `href`, warning once per element under lit's
|
|
131
|
+
* dev build when the 1.x default puts one on something that cannot use it.
|
|
132
|
+
* @internal
|
|
133
|
+
*/
|
|
134
|
+
shouldAssignHref(): boolean;
|
|
68
135
|
/** @internal */
|
|
69
136
|
seekRouter(): void;
|
|
70
137
|
/** @internal */
|
|
@@ -72,7 +139,7 @@ export declare class UiSrefDirective extends AsyncDirective {
|
|
|
72
139
|
/** @internal */
|
|
73
140
|
disconnected(): void;
|
|
74
141
|
onClick: (event: MouseEvent) => void;
|
|
75
|
-
update(part: ElementPart, [state, params, options]: [string, RawParams?,
|
|
142
|
+
update(part: ElementPart, [state, params, options]: [string, RawParams?, UiSrefTransitionOptions?]): typeof noChange;
|
|
76
143
|
doRender: () => typeof noChange;
|
|
77
144
|
private _firstUpdated;
|
|
78
145
|
/**
|
|
@@ -90,7 +157,8 @@ export declare class UiSrefDirective extends AsyncDirective {
|
|
|
90
157
|
* **Arguments:**
|
|
91
158
|
* - `state` - The target state name (can be relative like `.child` or `^.sibling`)
|
|
92
159
|
* - `params` - Optional state parameters (see [[RawParams]])
|
|
93
|
-
* - `options` - Optional transition options (see [[TransitionOptions]])
|
|
160
|
+
* - `options` - Optional transition options (see [[TransitionOptions]]), plus
|
|
161
|
+
* this directive's own (see {@link UiSrefOptions})
|
|
94
162
|
*
|
|
95
163
|
* @example Basic usage
|
|
96
164
|
* ```ts
|
|
@@ -119,11 +187,19 @@ export declare class UiSrefDirective extends AsyncDirective {
|
|
|
119
187
|
* html`<a ${uiSref('^.sibling')}>Go to Sibling</a>`
|
|
120
188
|
* ```
|
|
121
189
|
*
|
|
190
|
+
* @example On an element that is not a link
|
|
191
|
+
* ```ts
|
|
192
|
+
* // `<button>` has no href in HTML; 'auto' keeps the attribute off it.
|
|
193
|
+
* // Clicking still navigates — the option governs the href only.
|
|
194
|
+
* html`<button ${uiSref('.new', {}, { assignHref: 'auto' })}>New</button>`
|
|
195
|
+
* ```
|
|
196
|
+
*
|
|
122
197
|
* @see [[RawParams]]
|
|
123
198
|
* @see [[TransitionOptions]]
|
|
199
|
+
* @see {@link UiSrefOptions}
|
|
124
200
|
* @see [[DirectiveResult]]
|
|
125
201
|
*
|
|
126
202
|
* @category directives
|
|
127
203
|
*/
|
|
128
|
-
export declare const uiSref: (state: string, params?: RawParams, options?:
|
|
204
|
+
export declare const uiSref: (state: string, params?: RawParams, options?: UiSrefTransitionOptions) => DirectiveResult<typeof UiSrefDirective>;
|
|
129
205
|
//# sourceMappingURL=ui-sref.d.ts.map
|
package/dist/ui-sref.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui-sref.d.ts","mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"ui-sref.d.ts","mappings":"AAAA,SAGE,WACA,mBAEA,mBACK;AACP,SAAS,UAAU,mBAAmB;AACtC,SAAoB,gBAA0B;AAC9C,cAAc,uBAAuB;AACrC,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAE5B,SAAS,cAAc;;;;;AAMvB,OAAO,cAAM,uBAAuB;;;;;AAMpC,iBAAiB,sBAAsB,QAAQ;;CAE7C;;CAEA,aAAa;AACf;;;;;;AAOA,iBAAiB,0BAA0B,YAAY;CACrD,aAAa;AACf,GAAG;CACD,QAAQ;AACV;;;;;;;AAQA,OAAO,iBAAS,kBAAkB,aAAa,cAAc;;;;;;;AA+B7D,iBAAiB,cAAc;;;;;;;;;;;;;;;;;;;CAmB7B,uBAAuB;AACzB;;;;;;;AAQA,YAAY,0BAA0B,oBAAoB;;;;;;;;;AAa1D,OAAO,iBAAS;;;;;;;;;;;;;;AAiBhB,OAAO,iBAAS,aAAa,SAAS;;;;;;;;;;;;;;AA+CtC,OAAO,cAAM,wBAAwB,eAAe;CAClD;CACA,QAAQ;CACR,SAAS;CAET,SAAS;CAET,UAAU;CACV,YAAY;;CAGZ,eAAe;CAEf;CACA,aAAa;;CAGb,QAAQ;;CAGR;;CAGA,YAAY,UAAU;CAOtB,WAAW,OAAM,oBAAmC;CASpD,OACE,eACA,SAAS,WACT,UAAU,2BACF;;;;;;CA+CV;;CA2BA;;CAKA;;CAKA;CASA,UAAW,OAAO;CA6BlB,OACE,MAAM,aACN,CAAC,OAAO,QAAa,mBAEnB,YACA,mCAEM;CAmBV,uBAAsB;CAItB,QAAQ;;;;CAIR;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,OAAO,cAAM,SACX,eACA,SAAS,WACT,UAAU,4BACP,uBAAuB","names":[],"ignoreList":[],"sources":["../src/ui-sref.ts"]}
|
package/dist/ui-sref.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { extend, isNumber } from "@uirouter/core";
|
|
1
|
+
import { equals, extend, isNumber } from "@uirouter/core";
|
|
2
2
|
import { noChange } from "lit";
|
|
3
3
|
import { directive, PartType } from "lit/directive.js";
|
|
4
4
|
import { AsyncDirective } from "lit/async-directive.js";
|
|
@@ -12,6 +12,29 @@ export function uiSrefTargetEvent(targetState) {
|
|
|
12
12
|
detail: { targetState }
|
|
13
13
|
});
|
|
14
14
|
}
|
|
15
|
+
const paramsEqual = equals;
|
|
16
|
+
function sameTarget(a, b) {
|
|
17
|
+
return !!a && a.name() === b.name() && paramsEqual(a.params(), b.params());
|
|
18
|
+
}
|
|
19
|
+
const warnedAssignHref = new WeakSet();
|
|
20
|
+
export function inLitDevMode() {
|
|
21
|
+
return typeof UIRouterLitElement.enableWarning === "function";
|
|
22
|
+
}
|
|
23
|
+
export function isNativeLink(element) {
|
|
24
|
+
const tag = element.localName;
|
|
25
|
+
return tag === "a" || tag === "area";
|
|
26
|
+
}
|
|
27
|
+
function isModifiedClick(event) {
|
|
28
|
+
const { button, ctrlKey, metaKey, shiftKey, altKey } = event;
|
|
29
|
+
return !isNumber(button) || !!button || ctrlKey || metaKey || shiftKey || altKey;
|
|
30
|
+
}
|
|
31
|
+
function opensOffApp(element) {
|
|
32
|
+
const target = element.getAttribute("target");
|
|
33
|
+
if (target && target.toLowerCase() !== "_self") {
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
return (element.getAttribute("rel") ?? "").split(/\s+/).includes("external");
|
|
37
|
+
}
|
|
15
38
|
export class UiSrefDirective extends AsyncDirective {
|
|
16
39
|
constructor(partInfo) {
|
|
17
40
|
super(partInfo);
|
|
@@ -20,19 +43,22 @@ export class UiSrefDirective extends AsyncDirective {
|
|
|
20
43
|
this.options = {};
|
|
21
44
|
this.element = null;
|
|
22
45
|
this.parentView = null;
|
|
46
|
+
this.uiSrefOptions = {};
|
|
23
47
|
this.href = null;
|
|
24
48
|
this.targetState = null;
|
|
49
|
+
this._ownsHref = false;
|
|
25
50
|
this.onClick = (event) => {
|
|
26
51
|
const { uiRouter: router, state, params } = this;
|
|
27
52
|
const options = this.getOptions();
|
|
28
53
|
const $state = router?.stateService;
|
|
29
|
-
if (!$state || !this.element?.isConnected) {
|
|
54
|
+
if (!$state || !this.element?.isConnected || !state) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const element = event.currentTarget;
|
|
58
|
+
if (event.defaultPrevented || element.hasAttribute("download")) {
|
|
30
59
|
return;
|
|
31
60
|
}
|
|
32
|
-
|
|
33
|
-
const openInNewTab = target.getAttribute("target") === "_blank";
|
|
34
|
-
const isExternal = target.getAttribute("rel") === "external";
|
|
35
|
-
if (openInNewTab || isExternal || button || !isNumber(button) || ctrlKey || metaKey || !state) {
|
|
61
|
+
if (isNativeLink(element) && (isModifiedClick(event) || opensOffApp(element))) {
|
|
36
62
|
return;
|
|
37
63
|
}
|
|
38
64
|
void $state.go(state, params, options);
|
|
@@ -63,19 +89,44 @@ export class UiSrefDirective extends AsyncDirective {
|
|
|
63
89
|
if (!$state) {
|
|
64
90
|
return noChange;
|
|
65
91
|
}
|
|
66
|
-
|
|
92
|
+
const targetState = $state.target(state, params, this.getOptions(options));
|
|
93
|
+
const targetChanged = !sameTarget(this.targetState, targetState);
|
|
94
|
+
this.element.targetState = this.targetState = targetState;
|
|
67
95
|
this.href = $state.href(state, params, this.getOptions(options));
|
|
68
|
-
if (this.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
96
|
+
if (this.shouldAssignHref()) {
|
|
97
|
+
if (this.href !== this.element.getAttribute("href")) {
|
|
98
|
+
if (this.href) {
|
|
99
|
+
this.element.setAttribute("href", this.href);
|
|
100
|
+
this._ownsHref = true;
|
|
101
|
+
} else {
|
|
102
|
+
this.element.removeAttribute("href");
|
|
103
|
+
this._ownsHref = false;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
} else if (this._ownsHref) {
|
|
74
107
|
this.element.removeAttribute("href");
|
|
108
|
+
this._ownsHref = false;
|
|
109
|
+
}
|
|
110
|
+
if (targetChanged) {
|
|
111
|
+
this.element.dispatchEvent(uiSrefTargetEvent(this.targetState));
|
|
75
112
|
}
|
|
76
|
-
this.element.dispatchEvent(uiSrefTargetEvent(this.targetState));
|
|
77
113
|
return noChange;
|
|
78
114
|
}
|
|
115
|
+
shouldAssignHref() {
|
|
116
|
+
const element = this.element;
|
|
117
|
+
const { assignHref = true } = this.uiSrefOptions;
|
|
118
|
+
if (assignHref === "auto") {
|
|
119
|
+
return isNativeLink(element);
|
|
120
|
+
}
|
|
121
|
+
if (!assignHref) {
|
|
122
|
+
return false;
|
|
123
|
+
}
|
|
124
|
+
if (inLitDevMode() && this.href !== null && !isNativeLink(element) && !warnedAssignHref.has(element)) {
|
|
125
|
+
warnedAssignHref.add(element);
|
|
126
|
+
console.warn(`lit-ui-router: uiSref wrote href="${this.href}" to <${element.localName}>, which has no href in HTML. ` + `Pass { assignHref: 'auto' } to write it only to links; 'auto' becomes the default in 2.0.`);
|
|
127
|
+
}
|
|
128
|
+
return true;
|
|
129
|
+
}
|
|
79
130
|
seekRouter() {
|
|
80
131
|
this.uiRouter = UIRouterLitElement.seekRouter(this.element);
|
|
81
132
|
}
|
|
@@ -87,12 +138,15 @@ export class UiSrefDirective extends AsyncDirective {
|
|
|
87
138
|
this.element = null;
|
|
88
139
|
this.targetState = null;
|
|
89
140
|
this.href = null;
|
|
141
|
+
this._ownsHref = false;
|
|
90
142
|
this.unsubscribe?.();
|
|
91
143
|
}
|
|
92
144
|
update(part, [state, params = {}, options = {}]) {
|
|
145
|
+
const { assignHref, ...transitionOptions } = options;
|
|
93
146
|
this.state = state;
|
|
94
147
|
this.params = params;
|
|
95
|
-
this.options =
|
|
148
|
+
this.options = transitionOptions;
|
|
149
|
+
this.uiSrefOptions = { assignHref };
|
|
96
150
|
const uiSrefElement = part.element;
|
|
97
151
|
if (this.element !== uiSrefElement) {
|
|
98
152
|
this.element = uiSrefElement;
|
package/dist/ui-sref.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui-sref.js","mappings":"AAAA,SACE,QAGA,gBAEK;AACP,SAAS,gBAA6B;AACtC,SAAS,WAAqB,gBAAgB;AAE9C,SAAS,sBAAsB;AAG/B,SAAS,0BAA0B;AACnC,SAAS,cAAc;AAMvB,OAAO,MAAM,uBAAuB;AA8BpC,OAAO,SAAS,kBAAkB,aAA6C;CAC7E,OAAO,IAAI,YAAY,sBAAsB;EAC3C,SAAS;EACT,UAAU;EACV,QAAQ,EAAE,YAAY;CACxB,CAAC;AACH;AAeA,OAAO,MAAM,wBAAwB,eAAe;
|
|
1
|
+
{"version":3,"file":"ui-sref.js","mappings":"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","names":[],"ignoreList":[],"sources":["../src/ui-sref.ts"]}
|