ember-container-query 4.0.0-alpha.5 → 4.0.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/README.md +72 -50
- package/dist/components/container-query.d.ts +2 -2
- package/dist/components/container-query.d.ts.map +1 -1
- package/dist/components/container-query.js.map +1 -1
- package/dist/helpers/aspect-ratio.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/modifiers/container-query.js.map +1 -1
- package/package.json +25 -22
package/README.md
CHANGED
|
@@ -1,27 +1,37 @@
|
|
|
1
1
|
[](https://github.com/ijlee2/ember-container-query/actions?query=workflow%3ACI)
|
|
2
2
|
[](https://percy.io/Isaac/ember-container-query)
|
|
3
3
|
|
|
4
|
-
ember-container-query
|
|
5
|
-
==============================================================================
|
|
4
|
+
# ember-container-query
|
|
6
5
|
|
|
7
|
-
_Make container queries that harness the power of
|
|
6
|
+
_Make container queries that harness the power of Ember_
|
|
8
7
|
|
|
9
|
-
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
Installation
|
|
15
|
-
------------------------------------------------------------------------------
|
|
9
|
+
## Installation
|
|
16
10
|
|
|
17
11
|
```sh
|
|
18
12
|
ember install ember-container-query
|
|
19
13
|
```
|
|
20
14
|
|
|
21
15
|
<details>
|
|
22
|
-
<summary>Use Glint? ✨</summary>
|
|
16
|
+
<summary>Use Glint or <code><template></code> tag? ✨</summary>
|
|
17
|
+
|
|
18
|
+
- Update your template registry to extend this addon's. Check the [Glint documentation](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) for more information.
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
/* types/global.d.ts */
|
|
22
|
+
|
|
23
|
+
import '@glint/environment-ember-loose';
|
|
24
|
+
|
|
25
|
+
import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
|
|
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
|
+
```
|
|
23
33
|
|
|
24
|
-
- If you are using [
|
|
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.
|
|
25
35
|
|
|
26
36
|
```ts
|
|
27
37
|
/* app/components/tracks.{gjs,gts} */
|
|
@@ -44,30 +54,10 @@ ember install ember-container-query
|
|
|
44
54
|
</template>
|
|
45
55
|
```
|
|
46
56
|
|
|
47
|
-
- Otherwise, update your template registry to extend this addon's. Check the [Glint documentation](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) for more information.
|
|
48
|
-
|
|
49
|
-
```ts
|
|
50
|
-
/* types/global.d.ts */
|
|
51
|
-
|
|
52
|
-
import '@glint/environment-ember-loose';
|
|
53
|
-
|
|
54
|
-
import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
|
|
55
|
-
|
|
56
|
-
declare module '@glint/environment-ember-loose/registry' {
|
|
57
|
-
export default interface Registry extends EmberContainerQueryRegistry, /* other addon registries */ {
|
|
58
|
-
// local entries
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
⚠️ Glint is in active development and may introduce breaking changes. This addon will try to provide a stable API. Should it need to make a breaking change due to Glint, semantic versioning may not be rigorously followed (e.g. there is no new major version).
|
|
65
|
-
|
|
66
57
|
</details>
|
|
67
58
|
|
|
68
59
|
|
|
69
|
-
Applications
|
|
70
|
-
------------------------------------------------------------------------------
|
|
60
|
+
## Applications
|
|
71
61
|
|
|
72
62
|
Where can you use container queries? Here are real-life (and some theoretical) applications!
|
|
73
63
|
|
|
@@ -146,18 +136,24 @@ Where can you use container queries? Here are real-life (and some theoretical) a
|
|
|
146
136
|
1. Maybe a secret, most powerful item appears when the game world is at a certain size? :)
|
|
147
137
|
</details>
|
|
148
138
|
|
|
139
|
+
Not convinced? Open the [demo app](https://ember-container-query.netlify.app/) to see `ember-container-query` in action. (There's even a 404 page!)
|
|
140
|
+
|
|
141
|
+
<div align="left">
|
|
142
|
+
<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" />
|
|
143
|
+
<img alt="Another demo of ember-container-query shows a dashboard with widgets in mobile, tablet, and desktop resolutions" src="https://user-images.githubusercontent.com/16869656/233708509-1fac7262-239b-4f73-a58e-2ffd62456a73.gif" width="600" />
|
|
144
|
+
</div>
|
|
145
|
+
|
|
149
146
|
|
|
150
|
-
API
|
|
151
|
-
------------------------------------------------------------------------------
|
|
147
|
+
## API
|
|
152
148
|
|
|
153
|
-
|
|
149
|
+
`ember-container-query` provides 1 Glimmer component and 3 helpers:
|
|
154
150
|
|
|
155
151
|
- `<ContainerQuery>`
|
|
156
152
|
- `{{aspect-ratio}}`
|
|
157
153
|
- `{{height}}`
|
|
158
154
|
- `{{width}}`
|
|
159
155
|
|
|
160
|
-
|
|
156
|
+
The addon also provides a modifier so that you can opt out of using the provided component. You may also use the modifier to get the container dimensions when the window is resized.
|
|
161
157
|
|
|
162
158
|
- `{{container-query}}`
|
|
163
159
|
|
|
@@ -235,6 +231,7 @@ You can pass these arguments to the modifier.
|
|
|
235
231
|
- `@dataAttributePrefix`
|
|
236
232
|
- `@debounce`
|
|
237
233
|
- `@features`
|
|
234
|
+
- `@onQuery`
|
|
238
235
|
|
|
239
236
|
For more information, refer to [the arguments of `<ContainerQuery>` component](#arguments).
|
|
240
237
|
|
|
@@ -245,12 +242,39 @@ The outputs are similar to [those of `<ContainerQuery>` component](#outputs).
|
|
|
245
242
|
|
|
246
243
|
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.
|
|
247
244
|
|
|
245
|
+
```ts
|
|
246
|
+
/* app/components/chart.gts */
|
|
247
|
+
|
|
248
|
+
import { action } from '@ember/object';
|
|
249
|
+
import Component from '@glimmer/component';
|
|
250
|
+
import { tracked } from '@glimmer/tracking';
|
|
251
|
+
import { containerQuery, type Dimensions } from 'ember-container-query';
|
|
252
|
+
|
|
253
|
+
export default class ChartComponent extends Component {
|
|
254
|
+
@tracked height!: number;
|
|
255
|
+
@tracked width!: number;
|
|
256
|
+
|
|
257
|
+
@action updateDimensions({ dimensions }: { dimensions: Dimensions }) {
|
|
258
|
+
const { height, width } = dimensions;
|
|
259
|
+
|
|
260
|
+
this.height = height;
|
|
261
|
+
this.width = width;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// ...
|
|
265
|
+
|
|
266
|
+
<template>
|
|
267
|
+
<div {{containerQuery onQuery=this.updateDimensions}}>
|
|
268
|
+
<svg></svg>
|
|
269
|
+
</div>
|
|
270
|
+
</template>
|
|
271
|
+
}
|
|
272
|
+
```
|
|
248
273
|
|
|
249
274
|
</details>
|
|
250
275
|
|
|
251
276
|
|
|
252
|
-
Example
|
|
253
|
-
------------------------------------------------------------------------------
|
|
277
|
+
## Example
|
|
254
278
|
|
|
255
279
|
Let's look at the code that created the video demo above.
|
|
256
280
|
|
|
@@ -333,27 +357,25 @@ You can see that the album page uses 2 `<ContainerQuery>` components. Rest assur
|
|
|
333
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.
|
|
334
358
|
|
|
335
359
|
|
|
336
|
-
Compatibility
|
|
337
|
-
|
|
360
|
+
## Compatibility
|
|
361
|
+
|
|
362
|
+
* `ember-auto-import@v2`<sup>1</sup>
|
|
363
|
+
* Ember.js v4.4 or above
|
|
364
|
+
* Node.js v16 or above
|
|
338
365
|
|
|
339
|
-
|
|
340
|
-
* Ember CLI v3.28 or above
|
|
341
|
-
* Node.js v14 or above
|
|
366
|
+
<sup>1. `ember-container-query` is a v2 addon. This means, your project must have `ember-auto-import@v2`. If you are momentarily stuck with `ember-auto-import@v1`, you can use [`ember-container-query@v3.2.0`](https://github.com/ijlee2/ember-container-query/tree/3.2.0) to make container queries.</sup>
|
|
342
367
|
|
|
343
368
|
|
|
344
|
-
Contributing
|
|
345
|
-
------------------------------------------------------------------------------
|
|
369
|
+
## Contributing
|
|
346
370
|
|
|
347
371
|
See the [Contributing](CONTRIBUTING.md) guide for details.
|
|
348
372
|
|
|
349
373
|
|
|
350
|
-
Credits
|
|
351
|
-
------------------------------------------------------------------------------
|
|
374
|
+
## Credits
|
|
352
375
|
|
|
353
376
|
Much thanks goes to [Chad Carbert (@chadian)](https://github.com/chadian), who introduced me to container queries at [EmberFest 2019](https://www.youtube.com/watch?v=RIdjk9_RSBY) and created [`ember-fill-up`](https://github.com/chadian/ember-fill-up) 🌟. I modeled the API for `ember-container-query` based on Chad's addon.
|
|
354
377
|
|
|
355
378
|
|
|
356
|
-
License
|
|
357
|
-
------------------------------------------------------------------------------
|
|
379
|
+
## License
|
|
358
380
|
|
|
359
|
-
This project is licensed under the [MIT License](LICENSE.md).
|
|
381
|
+
This project is licensed under the [MIT License](LICENSE.md).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Component from '@glimmer/component';
|
|
2
2
|
import { Dimensions, Features, IndexSignatureParameter, QueryResults } from "../modifiers/container-query.js";
|
|
3
|
-
interface
|
|
3
|
+
interface ContainerQuerySignature<T extends IndexSignatureParameter> {
|
|
4
4
|
Args: {
|
|
5
5
|
dataAttributePrefix?: string;
|
|
6
6
|
debounce?: number;
|
|
@@ -17,7 +17,7 @@ interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
|
|
|
17
17
|
};
|
|
18
18
|
Element: HTMLElement;
|
|
19
19
|
}
|
|
20
|
-
declare class ContainerQueryComponent<T extends IndexSignatureParameter> extends Component<
|
|
20
|
+
declare class ContainerQueryComponent<T extends IndexSignatureParameter> extends Component<ContainerQuerySignature<T>> {
|
|
21
21
|
dimensions?: Dimensions;
|
|
22
22
|
queryResults?: QueryResults<T>;
|
|
23
23
|
tagName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/container-query.d.ts","sourceRoot":"","sources":["../src/components/container-query.ts"],"names":[],"mappings":"AAGA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAG3C,OAAO,+DAKN,wCAAqC;AAEtC,UAAU,
|
|
1
|
+
{"version":3,"file":"components/container-query.d.ts","sourceRoot":"","sources":["../src/components/container-query.ts"],"names":[],"mappings":"AAGA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAG3C,OAAO,+DAKN,wCAAqC;AAEtC,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,WAAW,CAAC;CACtB;AAED,cAAqB,uBAAuB,CAC1C,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;IAE7B,WAAW,CAAC,EAClB,UAAU,EACV,YAAY,GACb,EAAE;QACD,UAAU,EAAE,UAAU,CAAC;QACvB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;KAC/B,GAAG,IAAI;CAIT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container-query.js","sources":["../../src/components/container-query.hbs.js","../../src/components/container-query.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{! @glint-ignore: ember-element-helper needs to provide Glint signature }}\\n{{#let (element this.tagName) as |Tag|}}\\n <Tag\\n class=\\\"container-query\\\"\\n {{container-query\\n dataAttributePrefix=@dataAttributePrefix\\n debounce=@debounce\\n features=@features\\n onQuery=this.updateState\\n }}\\n ...attributes\\n >\\n {{yield\\n (hash\\n dimensions=this.dimensions\\n features=this.queryResults\\n )\\n }}\\n </Tag>\\n{{/let}}\")","import './container-query.css';\n\nimport { action } from '@ember/object';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nimport type {\n Dimensions,\n Features,\n IndexSignatureParameter,\n QueryResults,\n} from '../modifiers/container-query';\n\ninterface
|
|
1
|
+
{"version":3,"file":"container-query.js","sources":["../../src/components/container-query.hbs.js","../../src/components/container-query.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{! @glint-ignore: ember-element-helper needs to provide Glint signature }}\\n{{#let (element this.tagName) as |Tag|}}\\n <Tag\\n class=\\\"container-query\\\"\\n {{container-query\\n dataAttributePrefix=@dataAttributePrefix\\n debounce=@debounce\\n features=@features\\n onQuery=this.updateState\\n }}\\n ...attributes\\n >\\n {{yield\\n (hash\\n dimensions=this.dimensions\\n features=this.queryResults\\n )\\n }}\\n </Tag>\\n{{/let}}\")","import './container-query.css';\n\nimport { action } from '@ember/object';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nimport type {\n Dimensions,\n Features,\n IndexSignatureParameter,\n QueryResults,\n} from '../modifiers/container-query';\n\ninterface ContainerQuerySignature<T extends IndexSignatureParameter> {\n Args: {\n dataAttributePrefix?: string;\n debounce?: number;\n features?: Features<T>;\n tagName?: string;\n };\n Blocks: {\n default: [\n {\n dimensions?: Dimensions;\n features?: QueryResults<T>;\n },\n ];\n };\n Element: HTMLElement;\n}\n\nexport default class ContainerQueryComponent<\n T extends IndexSignatureParameter,\n> extends Component<ContainerQuerySignature<T>> {\n @tracked dimensions?: Dimensions;\n @tracked queryResults?: QueryResults<T>;\n\n // The dynamic tag is restricted to be immutable\n tagName = this.args.tagName ?? 'div';\n\n @action updateState({\n dimensions,\n queryResults,\n }: {\n dimensions: Dimensions;\n queryResults: QueryResults<T>;\n }): void {\n this.dimensions = dimensions;\n this.queryResults = queryResults;\n }\n}\n"],"names":["precompileTemplate","ContainerQueryComponent","_class","Component","constructor","args","_initializerDefineProperty","_descriptor","_descriptor2","_defineProperty","tagName","updateState","dimensions","queryResults","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AACA,eAAeA,kBAAkB,CAAC,geAAge,CAAC;;;AC8B9eC,IAAAA,uBAAuB,IAAAC,MAAA,GAA7B,MAAMD,uBAAuB,SAElCE,SAAS,CAA6B;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA,CAAA;AAAAC,IAAAA,0BAAA,qBAAAC,WAAA,EAAA,IAAA,CAAA,CAAA;AAAAD,IAAAA,0BAAA,uBAAAE,YAAA,EAAA,IAAA,CAAA,CAAA;AAI9C;AAAAC,IAAAA,eAAA,kBACU,IAAI,CAACJ,IAAI,CAACK,OAAO,IAAI,KAAK,CAAA,CAAA;AAAA,GAAA;AAE5BC,EAAAA,WAAWA,CAAC;IAClBC,UAAU;AACVC,IAAAA,YAAAA;AAIF,GAAC,EAAQ;IACP,IAAI,CAACD,UAAU,GAAGA,UAAU,CAAA;IAC5B,IAAI,CAACC,YAAY,GAAGA,YAAY,CAAA;AAClC,GAAA;AACF,CAAC,GAAAN,WAAA,GAAAO,yBAAA,CAAAZ,MAAA,CAAAa,SAAA,EAAA,YAAA,EAAA,CAhBEC,OAAO,CAAA,EAAA;EAAAC,YAAA,EAAA,IAAA;EAAAC,UAAA,EAAA,IAAA;EAAAC,QAAA,EAAA,IAAA;EAAAC,WAAA,EAAA,IAAA;AAAA,CAAAZ,CAAAA,EAAAA,YAAA,GAAAM,yBAAA,CAAAZ,MAAA,CAAAa,SAAA,mBACPC,OAAO,CAAA,EAAA;EAAAC,YAAA,EAAA,IAAA;EAAAC,UAAA,EAAA,IAAA;EAAAC,QAAA,EAAA,IAAA;EAAAC,WAAA,EAAA,IAAA;AAAA,CAAAN,CAAAA,EAAAA,yBAAA,CAAAZ,MAAA,CAAAa,SAAA,EAKPM,aAAAA,EAAAA,CAAAA,MAAM,GAAAC,MAAA,CAAAC,wBAAA,CAAArB,MAAA,CAAAa,SAAA,EAAA,aAAA,CAAA,EAAAb,MAAA,CAAAa,SAAA,IAAAb,MAAA,EAAA;AATmCsB,oBAAA,CAAAC,QAAA,EAAAxB,uBAAA,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aspect-ratio.js","sources":["../../src/helpers/aspect-ratio.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nimport type { Metadata } from '../modifiers/container-query';\n\ninterface AspectRatioHelperSignature {\n Args: {\n Named: {\n max?: number;\n min?: number;\n };\n Positional: [];\n };\n Return: Metadata;\n}\n\nconst AspectRatioHelper = helper<AspectRatioHelperSignature>(\n (_positional, named) => {\n const dimension = 'aspectRatio';\n const max = named.max ?? Infinity;\n const min = named.min ?? 0;\n\n return { dimension, max, min };\n }
|
|
1
|
+
{"version":3,"file":"aspect-ratio.js","sources":["../../src/helpers/aspect-ratio.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nimport type { Metadata } from '../modifiers/container-query';\n\ninterface AspectRatioHelperSignature {\n Args: {\n Named: {\n max?: number;\n min?: number;\n };\n Positional: [];\n };\n Return: Metadata;\n}\n\nconst AspectRatioHelper = helper<AspectRatioHelperSignature>(\n (_positional, named) => {\n const dimension = 'aspectRatio';\n const max = named.max ?? Infinity;\n const min = named.min ?? 0;\n\n return { dimension, max, min };\n },\n);\n\nexport default AspectRatioHelper;\n"],"names":["AspectRatioHelper","helper","_positional","named","dimension","max","Infinity","min"],"mappings":";;AAeMA,MAAAA,iBAAiB,GAAGC,MAAM,CAC9B,CAACC,WAAW,EAAEC,KAAK,KAAK;EACtB,MAAMC,SAAS,GAAG,aAAa,CAAA;AAC/B,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ,CAAA;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC,CAAA;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA,GAAAA;GAAK,CAAA;AAChC,CACF;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,4 +2,5 @@ export { default as ContainerQuery } from "./components/container-query.js";
|
|
|
2
2
|
export { default as aspectRatio } from "./helpers/aspect-ratio.js";
|
|
3
3
|
export { default as height } from "./helpers/height.js";
|
|
4
4
|
export { default as width } from "./helpers/width.js";
|
|
5
|
+
export type { Dimensions, Features, IndexSignatureParameter, Metadata, QueryResults } from "./modifiers/container-query.js";
|
|
5
6
|
export { default as containerQuery } from "./modifiers/container-query.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container-query.js","sources":["../../src/modifiers/container-query.ts"],"sourcesContent":["import { registerDestructor } from '@ember/destroyable';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\nimport { debounce as _debounce } from '@ember/runloop';\nimport { inject as service } from '@ember/service';\nimport Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\n\ntype IndexSignatureParameter = string | number | symbol;\ntype ObjectEntry<T> = [keyof T, T[keyof T]];\ntype ObjectEntries<T> =
|
|
1
|
+
{"version":3,"file":"container-query.js","sources":["../../src/modifiers/container-query.ts"],"sourcesContent":["import { registerDestructor } from '@ember/destroyable';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\nimport { debounce as _debounce } from '@ember/runloop';\nimport { inject as service } from '@ember/service';\nimport Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\n\ntype IndexSignatureParameter = string | number | symbol;\ntype ObjectEntry<T> = [keyof T, T[keyof T]];\ntype ObjectEntries<T> = ObjectEntry<T>[];\n\ntype Dimensions = {\n aspectRatio: number;\n height: number;\n width: number;\n};\n\ntype Metadata = {\n dimension: keyof Dimensions;\n max: number;\n min: number;\n};\n\ntype Features<T extends IndexSignatureParameter> = Record<T, Metadata>;\n\ntype QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;\n\ninterface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {\n Args: {\n Named: {\n dataAttributePrefix?: string;\n debounce?: number;\n features?: Features<T>;\n onQuery?: ({\n dimensions,\n queryResults,\n }: {\n dimensions: Dimensions;\n queryResults: QueryResults<T>;\n }) => void;\n };\n Positional: [];\n };\n Element: Element;\n}\n\nexport default class ContainerQueryModifier<\n T extends IndexSignatureParameter,\n> extends Modifier<ContainerQueryModifierSignature<T>> {\n @service private declare readonly resizeObserver;\n\n dimensions!: Dimensions;\n queryResults!: QueryResults<T>;\n\n private _dataAttributes: string[] = [];\n private _element?: Element;\n private _named!: NamedArgs<ContainerQueryModifierSignature<T>>;\n\n get dataAttributePrefix(): string {\n return this._named.dataAttributePrefix ?? 'container-query';\n }\n\n get debounce(): number {\n return this._named.debounce ?? 0;\n }\n\n get features(): Features<T> {\n return this._named.features ?? ({} as Features<T>);\n }\n\n constructor(owner: Owner, args: ArgsFor<ContainerQueryModifierSignature<T>>) {\n super(owner, args);\n\n registerDestructor(this, () => {\n this.resizeObserver.unobserve(this._element, this.onResize);\n });\n }\n\n modify(\n element: Element,\n _positional: PositionalArgs<ContainerQueryModifierSignature<T>>,\n named: NamedArgs<ContainerQueryModifierSignature<T>>,\n ): void {\n this._named = named;\n\n this.registerResizeObserver(element);\n this.queryContainer(element);\n }\n\n @action private onResize(resizeObserverEntry: ResizeObserverEntry): void {\n const element = resizeObserverEntry.target;\n\n if (this.debounce > 0) {\n _debounce(this, this.queryContainer, element, this.debounce);\n return;\n }\n\n this.queryContainer(element);\n }\n\n private registerResizeObserver(element: Element): void {\n this.resizeObserver.unobserve(this._element, this.onResize);\n\n this._element = element;\n this.resizeObserver.observe(this._element, this.onResize);\n }\n\n private queryContainer(element: Element): void {\n this.measureDimensions(element);\n this.evaluateQueries();\n this.resetDataAttributes(element);\n this.setDataAttributes(element);\n\n this._named.onQuery?.({\n dimensions: this.dimensions,\n queryResults: this.queryResults,\n });\n }\n\n private measureDimensions(element: Element): void {\n const height = element.clientHeight;\n const width = element.clientWidth;\n\n this.dimensions = {\n aspectRatio: width / height,\n height,\n width,\n };\n }\n\n private evaluateQueries(): void {\n const queryResults = {} as QueryResults<T>;\n\n for (const [featureName, metadata] of Object.entries(\n this.features,\n ) as ObjectEntries<Features<T>>) {\n const { dimension, min, max } = metadata;\n const value = this.dimensions[dimension];\n\n queryResults[featureName] = min <= value && value < max;\n }\n\n this.queryResults = queryResults;\n }\n\n private resetDataAttributes(element: Element): void {\n this._dataAttributes.forEach((dataAttribute) => {\n element.removeAttribute(dataAttribute);\n });\n\n this._dataAttributes = [];\n }\n\n private setDataAttributes(element: Element): void {\n const prefix = this.dataAttributePrefix;\n\n for (const [featureName, meetsFeature] of Object.entries(\n this.queryResults,\n ) as ObjectEntries<QueryResults<T>>) {\n if (!meetsFeature) {\n continue;\n }\n\n const dataAttribute = prefix\n ? `data-${prefix}-${String(featureName)}`\n : `data-${String(featureName)}`;\n\n element.setAttribute(dataAttribute, '');\n\n this._dataAttributes.push(dataAttribute);\n }\n }\n}\n\nexport {\n Dimensions,\n Features,\n IndexSignatureParameter,\n Metadata,\n QueryResults,\n};\n"],"names":["ContainerQueryModifier","_class","Modifier","dataAttributePrefix","_named","debounce","features","constructor","owner","args","_initializerDefineProperty","_descriptor","_defineProperty","registerDestructor","resizeObserver","unobserve","_element","onResize","modify","element","_positional","named","registerResizeObserver","queryContainer","resizeObserverEntry","target","_debounce","observe","measureDimensions","evaluateQueries","resetDataAttributes","setDataAttributes","onQuery","dimensions","queryResults","height","clientHeight","width","clientWidth","aspectRatio","featureName","metadata","Object","entries","dimension","min","max","value","_dataAttributes","forEach","dataAttribute","removeAttribute","prefix","meetsFeature","String","setAttribute","push","_applyDecoratedDescriptor","prototype","service","configurable","enumerable","writable","initializer","action","getOwnPropertyDescriptor"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-container-query",
|
|
3
|
-
"version": "4.0.0
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
|
+
"description": "Make container queries that harness the power of Ember",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"container-queries",
|
|
7
7
|
"container-query",
|
|
8
8
|
"element-queries",
|
|
9
9
|
"element-query",
|
|
10
10
|
"ember-addon",
|
|
11
|
-
"ember-octane",
|
|
12
11
|
"emberjs",
|
|
12
|
+
"embroider",
|
|
13
13
|
"glint",
|
|
14
|
-
"responsive-design"
|
|
14
|
+
"responsive-design",
|
|
15
|
+
"typescript"
|
|
15
16
|
],
|
|
16
17
|
"repository": {
|
|
17
18
|
"type": "git",
|
|
@@ -62,35 +63,37 @@
|
|
|
62
63
|
"ember-resize-observer-service": "^1.1.0"
|
|
63
64
|
},
|
|
64
65
|
"devDependencies": {
|
|
65
|
-
"@babel/core": "^7.21.
|
|
66
|
+
"@babel/core": "^7.21.5",
|
|
66
67
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
|
67
68
|
"@babel/plugin-proposal-decorators": "^7.21.0",
|
|
68
|
-
"@babel/preset-typescript": "^7.21.
|
|
69
|
+
"@babel/preset-typescript": "^7.21.5",
|
|
70
|
+
"@babel/runtime": "^7.21.5",
|
|
69
71
|
"@embroider/addon-dev": "^3.0.0",
|
|
70
|
-
"@gavant/glint-template-types": "^0.3.
|
|
71
|
-
"@glint/core": "^v1.0.
|
|
72
|
-
"@glint/environment-ember-loose": "^v1.0.
|
|
73
|
-
"@glint/template": "^v1.0.
|
|
72
|
+
"@gavant/glint-template-types": "^0.3.3",
|
|
73
|
+
"@glint/core": "^v1.0.2",
|
|
74
|
+
"@glint/environment-ember-loose": "^v1.0.2",
|
|
75
|
+
"@glint/template": "^v1.0.2",
|
|
74
76
|
"@tsconfig/ember": "^2.0.0",
|
|
75
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
76
|
-
"@typescript-eslint/parser": "^5.
|
|
77
|
-
"
|
|
77
|
+
"@typescript-eslint/eslint-plugin": "^5.59.1",
|
|
78
|
+
"@typescript-eslint/parser": "^5.59.1",
|
|
79
|
+
"concurrently": "^8.0.1",
|
|
80
|
+
"ember-template-lint": "^5.7.3",
|
|
78
81
|
"ember-template-lint-plugin-prettier": "^4.1.0",
|
|
79
|
-
"eslint": "^8.
|
|
80
|
-
"eslint-config-prettier": "^8.
|
|
81
|
-
"eslint-plugin-ember": "^11.
|
|
82
|
-
"eslint-plugin-n": "^15.
|
|
82
|
+
"eslint": "^8.39.0",
|
|
83
|
+
"eslint-config-prettier": "^8.8.0",
|
|
84
|
+
"eslint-plugin-ember": "^11.5.2",
|
|
85
|
+
"eslint-plugin-n": "^15.7.0",
|
|
83
86
|
"eslint-plugin-prettier": "^4.2.1",
|
|
84
87
|
"eslint-plugin-simple-import-sort": "^10.0.0",
|
|
85
|
-
"eslint-plugin-typescript-sort-keys": "^2.
|
|
86
|
-
"prettier": "^2.8.
|
|
87
|
-
"rollup": "^3.
|
|
88
|
+
"eslint-plugin-typescript-sort-keys": "^2.3.0",
|
|
89
|
+
"prettier": "^2.8.8",
|
|
90
|
+
"rollup": "^3.21.2",
|
|
88
91
|
"rollup-plugin-copy": "^3.4.0",
|
|
89
92
|
"rollup-plugin-ts": "^3.2.0",
|
|
90
|
-
"typescript": "^
|
|
93
|
+
"typescript": "^5.0.4"
|
|
91
94
|
},
|
|
92
95
|
"engines": {
|
|
93
|
-
"node": "
|
|
96
|
+
"node": "16.* || >= 18"
|
|
94
97
|
},
|
|
95
98
|
"ember": {
|
|
96
99
|
"edition": "octane"
|