ember-container-query 6.1.0 → 6.1.1
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/README.md +35 -128
- package/declarations/components/container-query.d.ts +1 -0
- package/declarations/components/container-query.d.ts.map +1 -0
- package/declarations/helpers/aspect-ratio.d.ts +1 -0
- package/declarations/helpers/aspect-ratio.d.ts.map +1 -0
- package/declarations/helpers/height.d.ts +1 -0
- package/declarations/helpers/height.d.ts.map +1 -0
- package/declarations/helpers/width.d.ts +1 -0
- package/declarations/helpers/width.d.ts.map +1 -0
- package/declarations/index.d.ts +1 -0
- package/declarations/index.d.ts.map +1 -0
- package/declarations/modifiers/container-query.d.ts +1 -0
- package/declarations/modifiers/container-query.d.ts.map +1 -0
- package/declarations/template-registry.d.ts +1 -0
- package/declarations/template-registry.d.ts.map +1 -0
- package/dist/components/container-query.js +1 -1
- package/dist/modifiers/container-query.js +1 -1
- package/package.json +13 -15
package/README.md
CHANGED
|
@@ -9,50 +9,28 @@ _Make container queries that harness the power of Ember_
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
11
11
|
```sh
|
|
12
|
-
|
|
12
|
+
pnpm add -D ember-container-query
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
<details>
|
|
16
|
-
<summary>Use Glint or <code><template></code> tag? ✨</summary>
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
<summary>Use Glint and <code>*.hbs</code> files?</summary>
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
/* types/index.d.ts */
|
|
19
|
+
Extend this addon's template registry to get native types.
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
declare module '@glint/environment-ember-loose/registry' {
|
|
28
|
-
export default interface Registry extends EmberContainerQueryRegistry, /* other addon registries */ {
|
|
29
|
-
// local entries
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
- If you are using [`<template>` tag](https://github.com/ember-template-imports/ember-template-imports), you are good to go! Use the named import to consume things.
|
|
35
|
-
|
|
36
|
-
```ts
|
|
37
|
-
/* app/components/tracks.{gjs,gts} */
|
|
21
|
+
```ts
|
|
22
|
+
/* types/index.d.ts */
|
|
23
|
+
import '@glint/environment-ember-loose';
|
|
24
|
+
import '@glint/environment-ember-template-imports';
|
|
38
25
|
|
|
39
|
-
|
|
40
|
-
import { ContainerQuery, height, width } from 'ember-container-query';
|
|
26
|
+
import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
|
|
41
27
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
tall=(height min=320)
|
|
49
|
-
}}
|
|
50
|
-
as |CQ|
|
|
51
|
-
>
|
|
52
|
-
...
|
|
53
|
-
</ContainerQuery>
|
|
54
|
-
</template>
|
|
55
|
-
```
|
|
28
|
+
declare module '@glint/environment-ember-loose/registry' {
|
|
29
|
+
export default interface Registry extends EmberContainerQueryRegistry, /* other addon registries */ {
|
|
30
|
+
// local entries
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
56
34
|
|
|
57
35
|
</details>
|
|
58
36
|
|
|
@@ -62,6 +40,7 @@ ember install ember-container-query
|
|
|
62
40
|
Where can you use container queries? Here are real-life (and some theoretical) applications!
|
|
63
41
|
|
|
64
42
|
<details>
|
|
43
|
+
|
|
65
44
|
<summary>Create reusable components that are independent of screen size ♻️</summary>
|
|
66
45
|
|
|
67
46
|
1. Components form a core of an Ember app. We love components!
|
|
@@ -86,6 +65,7 @@ Where can you use container queries? Here are real-life (and some theoretical) a
|
|
|
86
65
|
|
|
87
66
|
|
|
88
67
|
<details>
|
|
68
|
+
|
|
89
69
|
<summary>To table or not to table? That is the question. 🤔</summary>
|
|
90
70
|
|
|
91
71
|
1. A table is great for showing structured data. On mobile, with a limited width, not so much.
|
|
@@ -98,6 +78,7 @@ Where can you use container queries? Here are real-life (and some theoretical) a
|
|
|
98
78
|
|
|
99
79
|
|
|
100
80
|
<details>
|
|
81
|
+
|
|
101
82
|
<summary>Create a customizable dashboard 🎛️ 🎚️</summary>
|
|
102
83
|
|
|
103
84
|
1. It's difficult to create dashboard widgets that can be placed anywhere and look good.
|
|
@@ -105,10 +86,12 @@ Where can you use container queries? Here are real-life (and some theoretical) a
|
|
|
105
86
|
1. As a result, you may artificially constrain your users from customizing their dashboard.
|
|
106
87
|
|
|
107
88
|
1. If you _combine_ media and container queries, you can better meet the wants of designers, developers, and users.
|
|
89
|
+
|
|
108
90
|
</details>
|
|
109
91
|
|
|
110
92
|
|
|
111
93
|
<details>
|
|
94
|
+
|
|
112
95
|
<summary>Responsive images, videos, and D3 visualizations 🖼️ 📽️ 📈</summary>
|
|
113
96
|
|
|
114
97
|
1. Currently, you have to use [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) to load images with the optimal file size. Alternatively, you can [use container queries to decide which images to load](https://crunchingnumbers.live/2020/06/03/container-queries-adaptive-images/).
|
|
@@ -116,27 +99,32 @@ Where can you use container queries? Here are real-life (and some theoretical) a
|
|
|
116
99
|
2. Similarly, for videos, you could use container queries to decide format and display resolution.
|
|
117
100
|
|
|
118
101
|
3. D3 components can use container queries to decide what's the best way to show data. Do you show larger chart elements, show legends, allow scrolling, show text summary? etc.
|
|
102
|
+
|
|
119
103
|
</details>
|
|
120
104
|
|
|
121
105
|
|
|
122
106
|
<details>
|
|
107
|
+
|
|
123
108
|
<summary>Create beautiful, printable pages 🖨️</summary>
|
|
124
109
|
|
|
125
110
|
1. You may be able to compose this addon with others to arrive at something ambitious and unique.
|
|
126
111
|
|
|
127
112
|
1. For example, [`ember-printable-pages`](https://github.com/forge512/ember-printable-pages) lets us reuse components to make a printable document. The components could focus on presenting data with container queries, while `ember-printable-pages` could focus on deciding page layouts and lazily rendering components.
|
|
113
|
+
|
|
128
114
|
</details>
|
|
129
115
|
|
|
130
116
|
|
|
131
117
|
<details>
|
|
118
|
+
|
|
132
119
|
<summary>Hide secrets in games 🎮</summary>
|
|
133
120
|
|
|
134
121
|
1. You're designing [a game in Ember](https://www.youtube.com/watch?v=Ld1xnQWkqPU).
|
|
135
122
|
|
|
136
123
|
1. Maybe a secret, most powerful item appears when the game world is at a certain size? :)
|
|
124
|
+
|
|
137
125
|
</details>
|
|
138
126
|
|
|
139
|
-
|
|
127
|
+
You will find plenty of examples in [`docs-app`](https://github.com/ijlee2/ember-container-query/tree/main/docs-app). Visit https://ember-container-query.netlify.app/ to see the app in action!
|
|
140
128
|
|
|
141
129
|
<div align="left">
|
|
142
130
|
<img alt="A demo of ember-container-query shows a smooth transition when using a list or table to display data" src="https://user-images.githubusercontent.com/16869656/82177207-72699c00-989e-11ea-9cb6-2e388c5e98c0.gif" width="600" />
|
|
@@ -161,6 +149,7 @@ Expand the items below to learn more about the API.
|
|
|
161
149
|
|
|
162
150
|
|
|
163
151
|
<details>
|
|
152
|
+
|
|
164
153
|
<summary><code><ContainerQuery></code></summary>
|
|
165
154
|
|
|
166
155
|
### Arguments
|
|
@@ -189,7 +178,7 @@ You _may_<sup>1</sup> pass attributes to the component for these reasons:
|
|
|
189
178
|
|
|
190
179
|
<sup>2. When an [ARIA attribute has multiple values](https://github.com/ijlee2/ember-container-query/issues/38#issuecomment-647017665), the order of values can matter. At the moment, splattributes doesn't guarantee the order.</sup>
|
|
191
180
|
|
|
192
|
-
###
|
|
181
|
+
### Output
|
|
193
182
|
|
|
194
183
|
You can consume these values in your app or addon.
|
|
195
184
|
|
|
@@ -203,6 +192,7 @@ You can consume these values in your app or addon.
|
|
|
203
192
|
|
|
204
193
|
|
|
205
194
|
<details>
|
|
195
|
+
|
|
206
196
|
<summary><code>{{aspect-ratio}}</code>, <code>{{height}}</code>, <code>{{width}}</code></summary>
|
|
207
197
|
|
|
208
198
|
### Arguments
|
|
@@ -222,6 +212,7 @@ All helpers accept these arguments:
|
|
|
222
212
|
|
|
223
213
|
|
|
224
214
|
<details>
|
|
215
|
+
|
|
225
216
|
<summary><code>{{container-query}}</code></summary>
|
|
226
217
|
|
|
227
218
|
### Arguments
|
|
@@ -236,23 +227,22 @@ You can pass these arguments to the modifier.
|
|
|
236
227
|
For more information, refer to [the arguments of `<ContainerQuery>` component](#arguments).
|
|
237
228
|
|
|
238
229
|
|
|
239
|
-
###
|
|
230
|
+
### Output
|
|
240
231
|
|
|
241
|
-
The
|
|
232
|
+
The output is similar to [those of `<ContainerQuery>` component](#output).
|
|
242
233
|
|
|
243
234
|
Data attributes are automatically applied to the HTML element. To get `dimensions` and `features`, you will need to pass the argument `@onQuery` (a function) to the modifier.
|
|
244
235
|
|
|
245
236
|
```ts
|
|
246
237
|
/* app/components/chart.gts */
|
|
247
|
-
|
|
248
238
|
import { action } from '@ember/object';
|
|
249
239
|
import Component from '@glimmer/component';
|
|
250
240
|
import { tracked } from '@glimmer/tracking';
|
|
251
241
|
import { containerQuery, type Dimensions } from 'ember-container-query';
|
|
252
242
|
|
|
253
|
-
export default class
|
|
254
|
-
@tracked height
|
|
255
|
-
@tracked width
|
|
243
|
+
export default class Chart extends Component {
|
|
244
|
+
@tracked height: number;
|
|
245
|
+
@tracked width: number;
|
|
256
246
|
|
|
257
247
|
@action updateDimensions({ dimensions }: { dimensions: Dimensions }) {
|
|
258
248
|
const { height, width } = dimensions;
|
|
@@ -274,89 +264,6 @@ export default class ChartComponent extends Component {
|
|
|
274
264
|
</details>
|
|
275
265
|
|
|
276
266
|
|
|
277
|
-
## Example
|
|
278
|
-
|
|
279
|
-
Let's look at the code that created the video demo above.
|
|
280
|
-
|
|
281
|
-
<details>
|
|
282
|
-
<summary><code>app/templates/album.hbs</code></summary>
|
|
283
|
-
|
|
284
|
-
```hbs
|
|
285
|
-
<ContainerQuery
|
|
286
|
-
@features={{hash
|
|
287
|
-
large=(width min=960)
|
|
288
|
-
tall=(height min=400)
|
|
289
|
-
}}
|
|
290
|
-
as |CQ|
|
|
291
|
-
>
|
|
292
|
-
{{#let
|
|
293
|
-
(and CQ.features.large CQ.features.tall)
|
|
294
|
-
as |showLyrics|
|
|
295
|
-
}}
|
|
296
|
-
<section local-class="container {{if showLyrics "with-lyrics"}}">
|
|
297
|
-
<header local-class="album-header">
|
|
298
|
-
<h1>{{@model.name}}</h1>
|
|
299
|
-
<p>by <strong>{{@model.band.name}}</strong></p>
|
|
300
|
-
</header>
|
|
301
|
-
|
|
302
|
-
<div local-class="album-tracks">
|
|
303
|
-
<Tracks
|
|
304
|
-
@tracks={{@model.tracks}}
|
|
305
|
-
/>
|
|
306
|
-
</div>
|
|
307
|
-
|
|
308
|
-
{{#if showLyrics}}
|
|
309
|
-
<div local-class="track-lyrics" tabindex="0">
|
|
310
|
-
<Lyrics
|
|
311
|
-
@lyrics={{this.currentTrack.lyrics}}
|
|
312
|
-
/>
|
|
313
|
-
</div>
|
|
314
|
-
{{/if}}
|
|
315
|
-
</section>
|
|
316
|
-
{{/let}}
|
|
317
|
-
</ContainerQuery>
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
</details>
|
|
321
|
-
|
|
322
|
-
<details>
|
|
323
|
-
<summary><code>app/components/tracks.hbs</code></summary>
|
|
324
|
-
|
|
325
|
-
```hbs
|
|
326
|
-
<ContainerQuery
|
|
327
|
-
@features={{hash
|
|
328
|
-
small=(width max=480)
|
|
329
|
-
medium=(width min=480 max=640)
|
|
330
|
-
large=(width min=640)
|
|
331
|
-
tall=(height min=320)
|
|
332
|
-
}}
|
|
333
|
-
as |CQ|
|
|
334
|
-
>
|
|
335
|
-
{{#if (and CQ.features.large CQ.features.tall)}}
|
|
336
|
-
<Tracks::Table
|
|
337
|
-
@tracks={{@tracks}}
|
|
338
|
-
/>
|
|
339
|
-
|
|
340
|
-
{{else}}
|
|
341
|
-
<Tracks::List
|
|
342
|
-
@numColumns={{
|
|
343
|
-
if CQ.features.small 1
|
|
344
|
-
(if CQ.features.medium 2 3)
|
|
345
|
-
}}
|
|
346
|
-
@tracks={{@tracks}}
|
|
347
|
-
/>
|
|
348
|
-
|
|
349
|
-
{{/if}}
|
|
350
|
-
</ContainerQuery>
|
|
351
|
-
```
|
|
352
|
-
|
|
353
|
-
</details>
|
|
354
|
-
|
|
355
|
-
You can see that the album page uses 2 `<ContainerQuery>` components. Rest assured, they act independently of each other. When you pair `<ContainerQuery>` with some CSS, you can create layouts beyond the dreams of others! 🙌
|
|
356
|
-
|
|
357
|
-
For more examples, I encourage you to check out the code for my demo app. It is located under the [`docs-app`](https://github.com/ijlee2/ember-container-query/tree/main/docs-app) folder and is structured like a typical Ember app.
|
|
358
|
-
|
|
359
|
-
|
|
360
267
|
## Compatibility
|
|
361
268
|
|
|
362
269
|
- Ember.js v4.12 or above
|
|
@@ -365,7 +272,7 @@ For more examples, I encourage you to check out the code for my demo app. It is
|
|
|
365
272
|
|
|
366
273
|
## Contributing
|
|
367
274
|
|
|
368
|
-
See the [Contributing](CONTRIBUTING.md) guide for details.
|
|
275
|
+
See the [Contributing](../../CONTRIBUTING.md) guide for details.
|
|
369
276
|
|
|
370
277
|
|
|
371
278
|
## Credits
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container-query.d.ts","sourceRoot":"","sources":["../../src/components/container-query.gts"],"names":[],"mappings":"AAsEA,OAAO,uBAAuB,CAAC;AAG/B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAI3C,OAAO,KAAK,EACV,UAAU,EACV,QAAQ,EACR,uBAAuB,EACvB,YAAY,EACb,MAAM,iCAAiC,CAAC;AAGzC,UAAU,uBAAuB,CAAC,CAAC,SAAS,uBAAuB;IACjE,IAAI,EAAE;QACJ,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QACvB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,UAAU,CAAC,EAAE,UAAU,CAAC;gBACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;aAC5B;SACF,CAAC;KACH,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,OAAO,cAAc,CACjC,CAAC,SAAS,uBAAuB,CACjC,SAAQ,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAGxC,OAAO,SAA8B;IAErC,WAAW,GAAI,+BAGZ;QACD,UAAU,EAAE,UAAU,CAAC;QACvB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;KAC/B,KAAG,IAAI,CAGN;CA6BH"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../src/helpers/aspect-ratio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,KAAK,KAAK,GAAG;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAM3D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"height.d.ts","sourceRoot":"","sources":["../../src/helpers/height.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,KAAK,KAAK,GAAG;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAMtD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"width.d.ts","sourceRoot":"","sources":["../../src/helpers/width.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,KAAK,KAAK,GAAG;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAMrD"}
|
package/declarations/index.d.ts
CHANGED
|
@@ -4,3 +4,4 @@ export { default as height } from './helpers/height.ts';
|
|
|
4
4
|
export { default as width } from './helpers/width.ts';
|
|
5
5
|
export type { Dimensions, Features, IndexSignatureParameter, Metadata, QueryResults, } from './modifiers/container-query.ts';
|
|
6
6
|
export { default as containerQuery } from './modifiers/container-query.ts';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,UAAU,EACV,QAAQ,EACR,uBAAuB,EACvB,QAAQ,EACR,YAAY,GACb,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container-query.d.ts","sourceRoot":"","sources":["../../src/modifiers/container-query.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAGtC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,KAAK,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAIxD,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,SAAS,EAAE,MAAM,UAAU,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,QAAQ,CAAC,CAAC,SAAS,uBAAuB,IAAI,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEvE,KAAK,YAAY,CAAC,CAAC,SAAS,uBAAuB,IAAI,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1E,UAAU,uBAAuB,CAAC,CAAC,SAAS,uBAAuB;IACjE,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,mBAAmB,CAAC,EAAE,MAAM,CAAC;YAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,EACT,UAAU,EACV,YAAY,GACb,EAAE;gBACD,UAAU,EAAE,UAAU,CAAC;gBACvB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;aAC/B,KAAK,IAAI,CAAC;SACZ,CAAC;QACF,UAAU,EAAE,EAAE,CAAC;KAChB,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,OAAO,cAAc,CACjC,CAAC,SAAS,uBAAuB,CACjC,SAAQ,QAAQ,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAC5C,iBAAkC,cAAc,CAAC;IAEjD,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,QAAQ,CAAC,CAAU;IAC3B,OAAO,CAAC,MAAM,CAAyC;IAEvD,UAAU,EAAG,UAAU,CAAC;IACxB,YAAY,EAAG,YAAY,CAAC,CAAC,CAAC,CAAC;IAE/B,IAAI,mBAAmB,IAAI,MAAM,CAEhC;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAE1B;gBAEW,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAQnE,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,iBAAiB;IAWzB,MAAM,CACJ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,EACvD,KAAK,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,GAC3C,IAAI;IAOP,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAoBjB,OAAO,CAAC,QAAQ;CAWzB;AAED,YAAY,EACV,UAAU,EACV,QAAQ,EACR,uBAAuB,EACvB,QAAQ,EACR,YAAY,GACb,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template-registry.d.ts","sourceRoot":"","sources":["../src/template-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,uBAAuB,MAAM,kCAAkC,CAAC;AAC5E,OAAO,KAAK,iBAAiB,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,YAAY,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,WAAW,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,sBAAsB,MAAM,gCAAgC,CAAC;AAEzE,MAAM,CAAC,OAAO,WAAW,2BAA2B;IAClD,cAAc,EAAE,OAAO,uBAAuB,CAAC;IAC/C,cAAc,EAAE,OAAO,iBAAiB,CAAC;IACzC,iBAAiB,EAAE,OAAO,sBAAsB,CAAC;IACjD,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAC;CAC3B"}
|
|
@@ -6,7 +6,7 @@ import { element } from 'ember-element-helper';
|
|
|
6
6
|
import ContainerQuery$1 from '../modifiers/container-query.js';
|
|
7
7
|
import { precompileTemplate } from '@ember/template-compilation';
|
|
8
8
|
import { setComponentTemplate } from '@ember/component';
|
|
9
|
-
import { g, i } from 'decorator-transforms/runtime';
|
|
9
|
+
import { g, i } from 'decorator-transforms/runtime-esm';
|
|
10
10
|
|
|
11
11
|
;
|
|
12
12
|
|
|
@@ -4,7 +4,7 @@ import { action } from '@ember/object';
|
|
|
4
4
|
import { debounce } from '@ember/runloop';
|
|
5
5
|
import { service } from '@ember/service';
|
|
6
6
|
import Modifier from 'ember-modifier';
|
|
7
|
-
import { g, i, n } from 'decorator-transforms/runtime';
|
|
7
|
+
import { g, i, n } from 'decorator-transforms/runtime-esm';
|
|
8
8
|
|
|
9
9
|
let ContainerQuery$1 = class ContainerQuery extends Modifier {
|
|
10
10
|
static {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-container-query",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.1",
|
|
4
4
|
"description": "Make container queries that harness the power of Ember",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"container-queries",
|
|
@@ -57,41 +57,39 @@
|
|
|
57
57
|
"lint:hbs:fix": "ember-template-lint . --fix",
|
|
58
58
|
"lint:js": "eslint . --cache",
|
|
59
59
|
"lint:js:fix": "eslint . --fix",
|
|
60
|
-
"lint:types": "
|
|
60
|
+
"lint:types": "ember-tsc --noEmit",
|
|
61
61
|
"prepack": "rollup --config",
|
|
62
62
|
"start": "rollup --config --watch",
|
|
63
63
|
"test": "echo \"A v2 addon does not have tests, run tests in test-app\""
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@embroider/addon-shim": "^1.10.
|
|
66
|
+
"@embroider/addon-shim": "^1.10.2",
|
|
67
67
|
"decorator-transforms": "^2.3.0",
|
|
68
68
|
"ember-element-helper": "^0.8.8",
|
|
69
69
|
"ember-modifier": "^4.2.2",
|
|
70
70
|
"ember-resize-observer-service": "^1.1.0"
|
|
71
71
|
},
|
|
72
72
|
"devDependencies": {
|
|
73
|
-
"@babel/core": "^7.28.
|
|
74
|
-
"@babel/plugin-transform-typescript": "^7.28.
|
|
73
|
+
"@babel/core": "^7.28.5",
|
|
74
|
+
"@babel/plugin-transform-typescript": "^7.28.5",
|
|
75
75
|
"@babel/runtime": "^7.28.4",
|
|
76
76
|
"@embroider/addon-dev": "^8.1.0",
|
|
77
77
|
"@glimmer/component": "^2.0.0",
|
|
78
78
|
"@glimmer/tracking": "^1.1.2",
|
|
79
|
-
"@glint/
|
|
80
|
-
"@glint/
|
|
81
|
-
"@glint/environment-ember-template-imports": "^1.5.2",
|
|
82
|
-
"@glint/template": "^1.5.2",
|
|
79
|
+
"@glint/ember-tsc": "^1.0.7",
|
|
80
|
+
"@glint/template": "^1.7.2",
|
|
83
81
|
"@ijlee2-frontend-configs/ember-template-lint": "^2.2.0",
|
|
84
|
-
"@ijlee2-frontend-configs/eslint-config-ember": "^2.3.
|
|
82
|
+
"@ijlee2-frontend-configs/eslint-config-ember": "^2.3.1",
|
|
85
83
|
"@ijlee2-frontend-configs/prettier": "^2.2.0",
|
|
86
|
-
"@rollup/plugin-babel": "^6.0
|
|
87
|
-
"@tsconfig/ember": "^3.0.
|
|
84
|
+
"@rollup/plugin-babel": "^6.1.0",
|
|
85
|
+
"@tsconfig/ember": "^3.0.12",
|
|
88
86
|
"babel-plugin-ember-template-compilation": "^3.0.1",
|
|
89
87
|
"concurrently": "^9.2.1",
|
|
90
|
-
"ember-source": "^6.
|
|
88
|
+
"ember-source": "^6.8.1",
|
|
91
89
|
"ember-template-lint": "^7.9.3",
|
|
92
|
-
"eslint": "^9.
|
|
90
|
+
"eslint": "^9.39.1",
|
|
93
91
|
"prettier": "^3.6.2",
|
|
94
|
-
"rollup": "^4.
|
|
92
|
+
"rollup": "^4.53.2",
|
|
95
93
|
"typescript": "^5.9.3"
|
|
96
94
|
},
|
|
97
95
|
"engines": {
|