@visitwonders/assembly 0.12.0 → 0.14.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.
|
@@ -7,7 +7,7 @@ export type DrawerPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
7
7
|
interface DrawerContext {
|
|
8
8
|
isOpen: boolean;
|
|
9
9
|
titleId: string;
|
|
10
|
-
closeDrawer: () => void
|
|
10
|
+
closeDrawer: () => Promise<void>;
|
|
11
11
|
}
|
|
12
12
|
export interface DrawerSignature {
|
|
13
13
|
Element: HTMLDivElement;
|
|
@@ -18,6 +18,12 @@ export interface DrawerSignature {
|
|
|
18
18
|
defaultOpen?: boolean;
|
|
19
19
|
/** Callback when open state changes */
|
|
20
20
|
onOpenChange?: (open: boolean) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Fires once after the close animation completes. Does not fire on
|
|
23
|
+
* open, and does not fire if the drawer is re-opened before the close
|
|
24
|
+
* animation finishes.
|
|
25
|
+
*/
|
|
26
|
+
onCloseAnimationEnd?: () => void;
|
|
21
27
|
/** Which side the drawer appears from */
|
|
22
28
|
side?: DrawerSide;
|
|
23
29
|
/** Drawer size */
|
|
@@ -45,7 +51,15 @@ export interface DrawerSignature {
|
|
|
45
51
|
Footer: WithBoundArgs<typeof DrawerFooter, 'ctx'>;
|
|
46
52
|
Close: WithBoundArgs<typeof DrawerClose, 'ctx'>;
|
|
47
53
|
isOpen: boolean;
|
|
48
|
-
|
|
54
|
+
/**
|
|
55
|
+
* Closes the drawer and returns a promise that resolves once the
|
|
56
|
+
* close animation has ended. Resolves immediately if the drawer is
|
|
57
|
+
* already closed (and no exit animation is in flight). If the
|
|
58
|
+
* drawer is re-opened before the close animation finishes, the
|
|
59
|
+
* pending promise still resolves (no rejection) so consumer-
|
|
60
|
+
* sequenced work can continue.
|
|
61
|
+
*/
|
|
62
|
+
close: () => Promise<void>;
|
|
49
63
|
}
|
|
50
64
|
];
|
|
51
65
|
};
|
|
@@ -105,6 +119,7 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
105
119
|
private previousVisible;
|
|
106
120
|
private contentElement;
|
|
107
121
|
private previousActiveElement;
|
|
122
|
+
private pendingCloseResolvers;
|
|
108
123
|
titleId: string;
|
|
109
124
|
get isOpenInternal(): boolean;
|
|
110
125
|
set isOpenInternal(value: boolean);
|
|
@@ -120,7 +135,8 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
120
135
|
get shouldRender(): boolean;
|
|
121
136
|
get dataState(): 'open' | 'closed';
|
|
122
137
|
setOpen: (value: boolean) => void;
|
|
123
|
-
closeDrawer: () => void
|
|
138
|
+
closeDrawer: () => Promise<void>;
|
|
139
|
+
private drainCloseResolvers;
|
|
124
140
|
handleBackdropClose: () => void;
|
|
125
141
|
trackVisibility: import("ember-modifier").FunctionBasedModifier<{
|
|
126
142
|
Args: {
|
|
@@ -138,7 +154,7 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
138
154
|
};
|
|
139
155
|
Element: HTMLElement;
|
|
140
156
|
}>;
|
|
141
|
-
handleAnimationEnd: () => void;
|
|
157
|
+
handleAnimationEnd: (event: AnimationEvent) => void;
|
|
142
158
|
get context(): DrawerContext;
|
|
143
159
|
}
|
|
144
160
|
export { DrawerHeader, DrawerBody, DrawerFooter, DrawerClose };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/overlay/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAK1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAYrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtE,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/overlay/drawer.ts"],"names":[],"mappings":"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"}
|
package/dist/overlay/drawer.js
CHANGED
|
@@ -34,7 +34,7 @@ class DrawerHeader extends Component {
|
|
|
34
34
|
}
|
|
35
35
|
handleClose = event => {
|
|
36
36
|
event.preventDefault();
|
|
37
|
-
this.ctx.closeDrawer();
|
|
37
|
+
void this.ctx.closeDrawer();
|
|
38
38
|
};
|
|
39
39
|
static {
|
|
40
40
|
setComponentTemplate(precompileTemplate("<div class=\"drawer-header_e20b0b74f\" data-test-drawer-header ...attributes>\n <div id={{this.ctx.titleId}} class=\"drawer-title_e20b0b74f\">\n {{yield}}\n </div>\n {{#if this.isCloseButtonVisible}}\n <button type=\"button\" class=\"drawer-header-close_e20b0b74f\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-drawer-header-close>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n {{/if}}\n</div>", {
|
|
@@ -57,7 +57,7 @@ class DrawerClose extends Component {
|
|
|
57
57
|
}
|
|
58
58
|
handleClick = event => {
|
|
59
59
|
event.preventDefault();
|
|
60
|
-
this.ctx.closeDrawer();
|
|
60
|
+
void this.ctx.closeDrawer();
|
|
61
61
|
};
|
|
62
62
|
static {
|
|
63
63
|
setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"drawer-close\" {{on \"click\" this.handleClick}} data-test-drawer-close ...attributes>\n {{yield}}\n</button>", {
|
|
@@ -87,6 +87,7 @@ class Drawer extends Component {
|
|
|
87
87
|
previousVisible = undefined;
|
|
88
88
|
contentElement = null;
|
|
89
89
|
previousActiveElement = null;
|
|
90
|
+
pendingCloseResolvers = [];
|
|
90
91
|
titleId = `drawer-title-${uniqueId()}`;
|
|
91
92
|
// ============================================================================
|
|
92
93
|
// Getters
|
|
@@ -145,11 +146,26 @@ class Drawer extends Component {
|
|
|
145
146
|
this.args.onOpenChange?.(value);
|
|
146
147
|
};
|
|
147
148
|
closeDrawer = () => {
|
|
149
|
+
if (!this.isOpen && !this.exitAnimationActive) {
|
|
150
|
+
return Promise.resolve();
|
|
151
|
+
}
|
|
152
|
+
const promise = new Promise(resolve => {
|
|
153
|
+
this.pendingCloseResolvers.push(resolve);
|
|
154
|
+
});
|
|
148
155
|
this.setOpen(false);
|
|
156
|
+
return promise;
|
|
149
157
|
};
|
|
158
|
+
drainCloseResolvers() {
|
|
159
|
+
if (this.pendingCloseResolvers.length === 0) return;
|
|
160
|
+
const resolvers = this.pendingCloseResolvers;
|
|
161
|
+
this.pendingCloseResolvers = [];
|
|
162
|
+
for (const resolve of resolvers) {
|
|
163
|
+
resolve();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
150
166
|
handleBackdropClose = () => {
|
|
151
167
|
if (this.closeOnBackdropClick) {
|
|
152
|
-
this.closeDrawer();
|
|
168
|
+
void this.closeDrawer();
|
|
153
169
|
}
|
|
154
170
|
};
|
|
155
171
|
// ============================================================================
|
|
@@ -161,6 +177,12 @@ class Drawer extends Component {
|
|
|
161
177
|
if (wasVisible === true && named.visible === false) {
|
|
162
178
|
this.exitAnimationActive = true;
|
|
163
179
|
} else if (named.visible) {
|
|
180
|
+
// Re-opened before the close animation finished: the pending
|
|
181
|
+
// `animationend` for the close will never fire, so drain any
|
|
182
|
+
// awaiters now rather than leaving them hanging.
|
|
183
|
+
if (wasVisible === false) {
|
|
184
|
+
this.drainCloseResolvers();
|
|
185
|
+
}
|
|
164
186
|
this.exitAnimationActive = false;
|
|
165
187
|
}
|
|
166
188
|
});
|
|
@@ -192,7 +214,7 @@ class Drawer extends Component {
|
|
|
192
214
|
if (event.key === 'Escape' && this.closeOnEscape) {
|
|
193
215
|
event.preventDefault();
|
|
194
216
|
event.stopPropagation();
|
|
195
|
-
this.closeDrawer();
|
|
217
|
+
void this.closeDrawer();
|
|
196
218
|
return;
|
|
197
219
|
}
|
|
198
220
|
// Focus trap (only when blanket is shown)
|
|
@@ -242,9 +264,14 @@ class Drawer extends Component {
|
|
|
242
264
|
}
|
|
243
265
|
};
|
|
244
266
|
});
|
|
245
|
-
handleAnimationEnd =
|
|
267
|
+
handleAnimationEnd = event => {
|
|
268
|
+
// `animationend` bubbles — ignore events from nested content animations
|
|
269
|
+
// so consumer slots can animate without triggering the close callback.
|
|
270
|
+
if (event.target !== event.currentTarget) return;
|
|
246
271
|
if (!this.isOpen) {
|
|
247
272
|
this.exitAnimationActive = false;
|
|
273
|
+
this.args.onCloseAnimationEnd?.();
|
|
274
|
+
this.drainCloseResolvers();
|
|
248
275
|
}
|
|
249
276
|
};
|
|
250
277
|
// ============================================================================
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visitwonders/assembly",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "The default blueprint for Embroider v2 addons.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon"
|
|
@@ -77,6 +77,21 @@
|
|
|
77
77
|
"declarations",
|
|
78
78
|
"dist"
|
|
79
79
|
],
|
|
80
|
+
"scripts": {
|
|
81
|
+
"build": "rollup --config",
|
|
82
|
+
"format": "prettier . --cache --write",
|
|
83
|
+
"lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
|
|
84
|
+
"lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
|
|
85
|
+
"lint:format": "prettier . --cache --check",
|
|
86
|
+
"lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
|
|
87
|
+
"lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
|
|
88
|
+
"lint:js": "eslint . --cache",
|
|
89
|
+
"lint:js:fix": "eslint . --fix",
|
|
90
|
+
"lint:types": "glint",
|
|
91
|
+
"prepack": "rollup --config",
|
|
92
|
+
"start": "rollup --config --watch",
|
|
93
|
+
"test": "echo 'A v2 addon does not have tests, run tests in showcase'"
|
|
94
|
+
},
|
|
80
95
|
"dependencies": {
|
|
81
96
|
"@arthur5005/dnd-kit-ember": "^0.1.2",
|
|
82
97
|
"@embroider/addon-shim": "^1.8.9",
|
|
@@ -213,19 +228,5 @@
|
|
|
213
228
|
"./typography/heading.js": "./dist/_app_/typography/heading.js",
|
|
214
229
|
"./typography/text.js": "./dist/_app_/typography/text.js"
|
|
215
230
|
}
|
|
216
|
-
},
|
|
217
|
-
"scripts": {
|
|
218
|
-
"build": "rollup --config",
|
|
219
|
-
"format": "prettier . --cache --write",
|
|
220
|
-
"lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
|
|
221
|
-
"lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
|
|
222
|
-
"lint:format": "prettier . --cache --check",
|
|
223
|
-
"lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
|
|
224
|
-
"lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
|
|
225
|
-
"lint:js": "eslint . --cache",
|
|
226
|
-
"lint:js:fix": "eslint . --fix",
|
|
227
|
-
"lint:types": "glint",
|
|
228
|
-
"start": "rollup --config --watch",
|
|
229
|
-
"test": "echo 'A v2 addon does not have tests, run tests in showcase'"
|
|
230
231
|
}
|
|
231
|
-
}
|
|
232
|
+
}
|