ember-container-query 3.0.0-alpha.0 → 3.1.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/.stylelintcache +1 -1
- package/CHANGELOG.md +41 -0
- package/README.md +26 -0
- package/addon/components/container-query.hbs +1 -0
- package/addon/components/container-query.ts +22 -8
- package/addon/helpers/cq-aspect-ratio.ts +20 -10
- package/addon/helpers/cq-height.ts +16 -8
- package/addon/helpers/cq-width.ts +16 -8
- package/addon/modifiers/container-query.ts +37 -26
- package/addon/template-registry.ts +13 -0
- package/components/container-query.d.ts +20 -9
- package/helpers/cq-aspect-ratio.d.ts +7 -4
- package/helpers/cq-height.d.ts +7 -4
- package/helpers/cq-width.d.ts +7 -4
- package/modifiers/container-query.d.ts +17 -20
- package/package.json +17 -15
- package/template-registry.d.ts +13 -0
- package/tsconfig.json +4 -1
- package/types/dummy/index.d.ts +33 -0
package/.stylelintcache
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/
|
|
1
|
+
[{"/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/album.css":"1","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/index.css":"2","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/navigation-menu.css":"3","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/form.css":"4","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/app.css":"5","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/application.css":"6","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/not-found.css":"7","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/dashboard.css":"8","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/list.css":"9","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/table.css":"10","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form.css":"11","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/page.css":"12","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4.css":"13","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2.css":"14","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3.css":"15","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-5.css":"16","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1.css":"17","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/information.css":"18","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/checkbox.css":"19","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/captions.css":"20","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/textarea.css":"21","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/field.css":"22","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1/item.css":"23","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule.css":"24","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo.css":"25","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/stacked-chart.css":"26","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/input.css":"27","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/header.css":"28","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule/responsive-image.css":"29","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/body.css":"30","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/actions.css":"31"},{"size":892,"mtime":1656746523421,"hashOfConfig":"32"},{"size":36,"mtime":1670927594479,"hashOfConfig":"32"},{"size":323,"mtime":1656746523373,"hashOfConfig":"32"},{"size":82,"mtime":1656746523432,"hashOfConfig":"32"},{"size":1494,"mtime":1670927594478,"hashOfConfig":"32"},{"size":980,"mtime":1656746523427,"hashOfConfig":"32"},{"size":1299,"mtime":1656746523434,"hashOfConfig":"32"},{"size":1846,"mtime":1656746523430,"hashOfConfig":"32"},{"size":323,"mtime":1656746523376,"hashOfConfig":"32"},{"size":106,"mtime":1656746523378,"hashOfConfig":"32"},{"size":324,"mtime":1656746523380,"hashOfConfig":"32"},{"size":306,"mtime":1656746523386,"hashOfConfig":"32"},{"size":400,"mtime":1656746523408,"hashOfConfig":"32"},{"size":439,"mtime":1656746523393,"hashOfConfig":"32"},{"size":268,"mtime":1656746523400,"hashOfConfig":"32"},{"size":657,"mtime":1656746523418,"hashOfConfig":"32"},{"size":797,"mtime":1656746523388,"hashOfConfig":"32"},{"size":225,"mtime":1656746523384,"hashOfConfig":"32"},{"size":566,"mtime":1653552800391,"hashOfConfig":"32"},{"size":2101,"mtime":1656746523395,"hashOfConfig":"32"},{"size":375,"mtime":1653552800412,"hashOfConfig":"32"},{"size":1630,"mtime":1656746523382,"hashOfConfig":"32"},{"size":243,"mtime":1656746523391,"hashOfConfig":"32"},{"size":1570,"mtime":1656746523403,"hashOfConfig":"32"},{"size":937,"mtime":1656746523410,"hashOfConfig":"32"},{"size":267,"mtime":1656746523397,"hashOfConfig":"32"},{"size":360,"mtime":1653552800408,"hashOfConfig":"32"},{"size":888,"mtime":1656746523416,"hashOfConfig":"32"},{"size":159,"mtime":1656746523405,"hashOfConfig":"32"},{"size":493,"mtime":1656746523414,"hashOfConfig":"32"},{"size":701,"mtime":1656746523412,"hashOfConfig":"32"},"187t81u"]
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,44 @@
|
|
|
1
|
+
## 3.1.0 (2022-12-20)
|
|
2
|
+
|
|
3
|
+
### Enhancement
|
|
4
|
+
* [#140](https://github.com/ijlee2/ember-container-query/pull/140) Add Glint signatures ([@ijlee2](https://github.com/ijlee2))
|
|
5
|
+
|
|
6
|
+
### Internal
|
|
7
|
+
* [#145](https://github.com/ijlee2/ember-container-query/pull/145) Updated development dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
|
|
8
|
+
* [#141](https://github.com/ijlee2/ember-container-query/pull/141) Glint demo app ([@ijlee2](https://github.com/ijlee2))
|
|
9
|
+
* [#140](https://github.com/ijlee2/ember-container-query/pull/140) Add Glint signatures ([@ijlee2](https://github.com/ijlee2))
|
|
10
|
+
|
|
11
|
+
### Documentation
|
|
12
|
+
* [#141](https://github.com/ijlee2/ember-container-query/pull/141) Glint demo app ([@ijlee2](https://github.com/ijlee2))
|
|
13
|
+
* [#140](https://github.com/ijlee2/ember-container-query/pull/140) Add Glint signatures ([@ijlee2](https://github.com/ijlee2))
|
|
14
|
+
|
|
15
|
+
### Committers: 1
|
|
16
|
+
- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
|
|
17
|
+
- Thanks to [@NullVoxPopuli](https://github.com/NullVoxPopuli), [@denisclark](https://github.com/denisclark), [@gossi](https://github.com/gossi), and [@buschtoens](https://github.com/buschtoens) for their help with [#140](https://github.com/ijlee2/ember-container-query/pull/140)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## 3.0.0 (2022-12-15)
|
|
21
|
+
|
|
22
|
+
### Breaking Change
|
|
23
|
+
* [#135](https://github.com/ijlee2/ember-container-query/pull/135) Documented {{container-query}} modifier. Dropped support for Node 12 and Ember 3.24. ([@ijlee2](https://github.com/ijlee2))
|
|
24
|
+
|
|
25
|
+
### Internal
|
|
26
|
+
* [#142](https://github.com/ijlee2/ember-container-query/pull/142) Updated development dependencies ([@ijlee2](https://github.com/ijlee2))
|
|
27
|
+
* [#138](https://github.com/ijlee2/ember-container-query/pull/138) Updated development dependencies ([@ijlee2](https://github.com/ijlee2))
|
|
28
|
+
* [#137](https://github.com/ijlee2/ember-container-query/pull/137) Updated demo app ([@ijlee2](https://github.com/ijlee2))
|
|
29
|
+
* [#136](https://github.com/ijlee2/ember-container-query/pull/136) Reinstalled ember-cli-typescript ([@ijlee2](https://github.com/ijlee2))
|
|
30
|
+
* [#135](https://github.com/ijlee2/ember-container-query/pull/135) Documented {{container-query}} modifier. Dropped support for Node 12 and Ember 3.24. ([@ijlee2](https://github.com/ijlee2))
|
|
31
|
+
* [#131](https://github.com/ijlee2/ember-container-query/pull/131) Remove ember-cli-typescript. Enable enableTypeScriptTransform instead. ([@ijlee2](https://github.com/ijlee2))
|
|
32
|
+
|
|
33
|
+
### Documentation
|
|
34
|
+
* [#137](https://github.com/ijlee2/ember-container-query/pull/137) Updated demo app ([@ijlee2](https://github.com/ijlee2))
|
|
35
|
+
* [#135](https://github.com/ijlee2/ember-container-query/pull/135) Documented {{container-query}} modifier. Dropped support for Node 12 and Ember 3.24. ([@ijlee2](https://github.com/ijlee2))
|
|
36
|
+
* [#134](https://github.com/ijlee2/ember-container-query/pull/134) Refactor tests ([@ijlee2](https://github.com/ijlee2))
|
|
37
|
+
|
|
38
|
+
### Committers: 1
|
|
39
|
+
- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
|
|
40
|
+
|
|
41
|
+
|
|
1
42
|
## 3.0.0-alpha.0 (2022-12-13)
|
|
2
43
|
|
|
3
44
|
### Breaking Change
|
package/README.md
CHANGED
|
@@ -18,6 +18,32 @@ Installation
|
|
|
18
18
|
ember install ember-container-query
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
<details>
|
|
22
|
+
<summary>Use Glint? ✨</summary>
|
|
23
|
+
|
|
24
|
+
- If you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) (via [first-class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)), then you are good to go!
|
|
25
|
+
|
|
26
|
+
- 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.
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
/* types/global.d.ts */
|
|
30
|
+
|
|
31
|
+
import '@glint/environment-ember-loose';
|
|
32
|
+
|
|
33
|
+
import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
|
|
34
|
+
|
|
35
|
+
declare module '@glint/environment-ember-loose/registry' {
|
|
36
|
+
export default interface Registry extends EmberContainerQueryRegistry, /* other addon registries */ {
|
|
37
|
+
// local entries
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
⚠️ 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).
|
|
44
|
+
|
|
45
|
+
</details>
|
|
46
|
+
|
|
21
47
|
|
|
22
48
|
Applications
|
|
23
49
|
------------------------------------------------------------------------------
|
|
@@ -4,19 +4,33 @@ import { tracked } from '@glimmer/tracking';
|
|
|
4
4
|
import type {
|
|
5
5
|
Dimensions,
|
|
6
6
|
Features,
|
|
7
|
+
IndexSignatureParameter,
|
|
7
8
|
QueryResults,
|
|
8
9
|
} from 'ember-container-query/modifiers/container-query';
|
|
9
10
|
|
|
10
|
-
interface
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
|
|
12
|
+
Args: {
|
|
13
|
+
dataAttributePrefix?: string;
|
|
14
|
+
debounce?: number;
|
|
15
|
+
features?: Features<T>;
|
|
16
|
+
tagName?: string;
|
|
17
|
+
};
|
|
18
|
+
Blocks: {
|
|
19
|
+
default: [
|
|
20
|
+
{
|
|
21
|
+
dimensions?: Dimensions;
|
|
22
|
+
features?: QueryResults<T>;
|
|
23
|
+
}
|
|
24
|
+
];
|
|
25
|
+
};
|
|
26
|
+
Element: HTMLElement;
|
|
15
27
|
}
|
|
16
28
|
|
|
17
|
-
export default class ContainerQueryComponent
|
|
29
|
+
export default class ContainerQueryComponent<
|
|
30
|
+
T extends IndexSignatureParameter
|
|
31
|
+
> extends Component<ContainerQueryComponentSignature<T>> {
|
|
18
32
|
@tracked dimensions?: Dimensions;
|
|
19
|
-
@tracked queryResults?: QueryResults
|
|
33
|
+
@tracked queryResults?: QueryResults<T>;
|
|
20
34
|
|
|
21
35
|
// The dynamic tag is restricted to be immutable
|
|
22
36
|
tagName = this.args.tagName ?? 'div';
|
|
@@ -26,7 +40,7 @@ export default class ContainerQueryComponent extends Component<ContainerQueryCom
|
|
|
26
40
|
queryResults,
|
|
27
41
|
}: {
|
|
28
42
|
dimensions: Dimensions;
|
|
29
|
-
queryResults: QueryResults
|
|
43
|
+
queryResults: QueryResults<T>;
|
|
30
44
|
}): void {
|
|
31
45
|
this.dimensions = dimensions;
|
|
32
46
|
this.queryResults = queryResults;
|
|
@@ -1,15 +1,25 @@
|
|
|
1
1
|
import { helper } from '@ember/component/helper';
|
|
2
2
|
import type { Metadata } from 'ember-container-query/modifiers/container-query';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
interface CqAspectRatioHelperSignature {
|
|
5
|
+
Args: {
|
|
6
|
+
Named: {
|
|
7
|
+
max?: number;
|
|
8
|
+
min?: number;
|
|
9
|
+
};
|
|
10
|
+
Positional: [];
|
|
11
|
+
};
|
|
12
|
+
Return: Metadata;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
const CqAspectRatioHelper = helper<CqAspectRatioHelperSignature>(
|
|
16
|
+
(_positional, named) => {
|
|
17
|
+
const dimension = 'aspectRatio';
|
|
18
|
+
const max = named.max ?? Infinity;
|
|
19
|
+
const min = named.min ?? 0;
|
|
20
|
+
|
|
21
|
+
return { dimension, max, min };
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
export default CqAspectRatioHelper;
|
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
import { helper } from '@ember/component/helper';
|
|
2
2
|
import type { Metadata } from 'ember-container-query/modifiers/container-query';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
interface CqHeightHelperSignature {
|
|
5
|
+
Args: {
|
|
6
|
+
Named: {
|
|
7
|
+
max?: number;
|
|
8
|
+
min?: number;
|
|
9
|
+
};
|
|
10
|
+
Positional: [];
|
|
11
|
+
};
|
|
12
|
+
Return: Metadata;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const CqHeightHelper = helper<CqHeightHelperSignature>((_positional, named) => {
|
|
8
16
|
const dimension = 'height';
|
|
9
|
-
const max =
|
|
10
|
-
const min =
|
|
17
|
+
const max = named.max ?? Infinity;
|
|
18
|
+
const min = named.min ?? 0;
|
|
11
19
|
|
|
12
20
|
return { dimension, max, min };
|
|
13
|
-
}
|
|
21
|
+
});
|
|
14
22
|
|
|
15
|
-
export default
|
|
23
|
+
export default CqHeightHelper;
|
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
import { helper } from '@ember/component/helper';
|
|
2
2
|
import type { Metadata } from 'ember-container-query/modifiers/container-query';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
interface CqWidthHelperSignature {
|
|
5
|
+
Args: {
|
|
6
|
+
Named: {
|
|
7
|
+
max?: number;
|
|
8
|
+
min?: number;
|
|
9
|
+
};
|
|
10
|
+
Positional: [];
|
|
11
|
+
};
|
|
12
|
+
Return: Metadata;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const CqWidthHelper = helper<CqWidthHelperSignature>((_positional, named) => {
|
|
8
16
|
const dimension = 'width';
|
|
9
|
-
const max =
|
|
10
|
-
const min =
|
|
17
|
+
const max = named.max ?? Infinity;
|
|
18
|
+
const min = named.min ?? 0;
|
|
11
19
|
|
|
12
20
|
return { dimension, max, min };
|
|
13
|
-
}
|
|
21
|
+
});
|
|
14
22
|
|
|
15
|
-
export default
|
|
23
|
+
export default CqWidthHelper;
|
|
@@ -4,38 +4,36 @@ import { debounce as _debounce } from '@ember/runloop';
|
|
|
4
4
|
import { inject as service } from '@ember/service';
|
|
5
5
|
import Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
dimension: 'aspectRatio' | 'height' | 'width';
|
|
9
|
-
max: number;
|
|
10
|
-
min: number;
|
|
11
|
-
};
|
|
7
|
+
type IndexSignatureParameter = string | number | symbol;
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
[featureName: string]: Metadata;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export type Dimensions = {
|
|
9
|
+
type Dimensions = {
|
|
18
10
|
aspectRatio: number;
|
|
19
11
|
height: number;
|
|
20
12
|
width: number;
|
|
21
13
|
};
|
|
22
14
|
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
type Metadata = {
|
|
16
|
+
dimension: 'aspectRatio' | 'height' | 'width';
|
|
17
|
+
max: number;
|
|
18
|
+
min: number;
|
|
25
19
|
};
|
|
26
20
|
|
|
27
|
-
|
|
21
|
+
type Features<T extends IndexSignatureParameter> = Record<T, Metadata>;
|
|
22
|
+
|
|
23
|
+
type QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;
|
|
24
|
+
|
|
25
|
+
interface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {
|
|
28
26
|
Args: {
|
|
29
27
|
Named: {
|
|
30
28
|
dataAttributePrefix?: string;
|
|
31
29
|
debounce?: number;
|
|
32
|
-
features?: Features
|
|
30
|
+
features?: Features<T>;
|
|
33
31
|
onQuery?: ({
|
|
34
32
|
dimensions,
|
|
35
33
|
queryResults,
|
|
36
34
|
}: {
|
|
37
35
|
dimensions: Dimensions;
|
|
38
|
-
queryResults: QueryResults
|
|
36
|
+
queryResults: QueryResults<T>;
|
|
39
37
|
}) => void;
|
|
40
38
|
};
|
|
41
39
|
Positional: [];
|
|
@@ -43,15 +41,17 @@ interface ContainerQueryModifierSignature {
|
|
|
43
41
|
Element: Element;
|
|
44
42
|
}
|
|
45
43
|
|
|
46
|
-
export default class ContainerQueryModifier
|
|
44
|
+
export default class ContainerQueryModifier<
|
|
45
|
+
T extends IndexSignatureParameter
|
|
46
|
+
> extends Modifier<ContainerQueryModifierSignature<T>> {
|
|
47
47
|
@service private declare readonly resizeObserver;
|
|
48
48
|
|
|
49
49
|
dimensions!: Dimensions;
|
|
50
|
-
queryResults!: QueryResults
|
|
50
|
+
queryResults!: QueryResults<T>;
|
|
51
51
|
|
|
52
52
|
private _dataAttributes: string[] = [];
|
|
53
53
|
private _element?: Element;
|
|
54
|
-
private _named!: NamedArgs<ContainerQueryModifierSignature
|
|
54
|
+
private _named!: NamedArgs<ContainerQueryModifierSignature<T>>;
|
|
55
55
|
|
|
56
56
|
get dataAttributePrefix(): string {
|
|
57
57
|
return this._named.dataAttributePrefix ?? 'container-query';
|
|
@@ -61,11 +61,14 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
|
|
|
61
61
|
return this._named.debounce ?? 0;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
get features(): Features {
|
|
65
|
-
return this._named.features ?? {};
|
|
64
|
+
get features(): Features<T> {
|
|
65
|
+
return this._named.features ?? ({} as Features<T>);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
constructor(
|
|
68
|
+
constructor(
|
|
69
|
+
owner: unknown,
|
|
70
|
+
args: ArgsFor<ContainerQueryModifierSignature<T>>
|
|
71
|
+
) {
|
|
69
72
|
super(owner, args);
|
|
70
73
|
|
|
71
74
|
registerDestructor(this, () => {
|
|
@@ -75,8 +78,8 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
|
|
|
75
78
|
|
|
76
79
|
modify(
|
|
77
80
|
element: Element,
|
|
78
|
-
_positional: PositionalArgs<ContainerQueryModifierSignature
|
|
79
|
-
named: NamedArgs<ContainerQueryModifierSignature
|
|
81
|
+
_positional: PositionalArgs<ContainerQueryModifierSignature<T>>,
|
|
82
|
+
named: NamedArgs<ContainerQueryModifierSignature<T>>
|
|
80
83
|
): void {
|
|
81
84
|
this._named = named;
|
|
82
85
|
|
|
@@ -126,13 +129,13 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
|
|
|
126
129
|
}
|
|
127
130
|
|
|
128
131
|
private evaluateQueries(): void {
|
|
129
|
-
const queryResults = {} as QueryResults
|
|
132
|
+
const queryResults = {} as QueryResults<T>;
|
|
130
133
|
|
|
131
134
|
for (const [featureName, metadata] of Object.entries(this.features)) {
|
|
132
|
-
const { dimension, min, max } = metadata;
|
|
135
|
+
const { dimension, min, max } = metadata as Metadata;
|
|
133
136
|
const value = this.dimensions[dimension];
|
|
134
137
|
|
|
135
|
-
queryResults[featureName] = min <= value && value < max;
|
|
138
|
+
queryResults[featureName as T] = min <= value && value < max;
|
|
136
139
|
}
|
|
137
140
|
|
|
138
141
|
this.queryResults = queryResults;
|
|
@@ -166,3 +169,11 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
|
|
|
166
169
|
}
|
|
167
170
|
}
|
|
168
171
|
}
|
|
172
|
+
|
|
173
|
+
export {
|
|
174
|
+
Dimensions,
|
|
175
|
+
Features,
|
|
176
|
+
IndexSignatureParameter,
|
|
177
|
+
Metadata,
|
|
178
|
+
QueryResults,
|
|
179
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type ContainerQueryComponent from 'ember-container-query/components/container-query';
|
|
2
|
+
import type CqAspectRatioHelper from 'ember-container-query/helpers/cq-aspect-ratio';
|
|
3
|
+
import type CqHeightHelper from 'ember-container-query/helpers/cq-height';
|
|
4
|
+
import type CqWidthHelper from 'ember-container-query/helpers/cq-width';
|
|
5
|
+
import type ContainerQueryModifier from 'ember-container-query/modifiers/container-query';
|
|
6
|
+
|
|
7
|
+
export default interface EmberContainerQueryRegistry {
|
|
8
|
+
ContainerQuery: typeof ContainerQueryComponent;
|
|
9
|
+
'container-query': typeof ContainerQueryModifier;
|
|
10
|
+
'cq-aspect-ratio': typeof CqAspectRatioHelper;
|
|
11
|
+
'cq-height': typeof CqHeightHelper;
|
|
12
|
+
'cq-width': typeof CqWidthHelper;
|
|
13
|
+
}
|
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
import Component from '@glimmer/component';
|
|
2
|
-
import type { Dimensions, Features, QueryResults } from 'ember-container-query/modifiers/container-query';
|
|
3
|
-
interface
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import type { Dimensions, Features, IndexSignatureParameter, QueryResults } from 'ember-container-query/modifiers/container-query';
|
|
3
|
+
interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
|
|
4
|
+
Args: {
|
|
5
|
+
dataAttributePrefix?: string;
|
|
6
|
+
debounce?: number;
|
|
7
|
+
features?: Features<T>;
|
|
8
|
+
tagName?: string;
|
|
9
|
+
};
|
|
10
|
+
Blocks: {
|
|
11
|
+
default: [
|
|
12
|
+
{
|
|
13
|
+
dimensions?: Dimensions;
|
|
14
|
+
features?: QueryResults<T>;
|
|
15
|
+
}
|
|
16
|
+
];
|
|
17
|
+
};
|
|
18
|
+
Element: HTMLElement;
|
|
8
19
|
}
|
|
9
|
-
export default class ContainerQueryComponent extends Component<
|
|
20
|
+
export default class ContainerQueryComponent<T extends IndexSignatureParameter> extends Component<ContainerQueryComponentSignature<T>> {
|
|
10
21
|
dimensions?: Dimensions;
|
|
11
|
-
queryResults?: QueryResults
|
|
22
|
+
queryResults?: QueryResults<T>;
|
|
12
23
|
tagName: string;
|
|
13
24
|
updateState({ dimensions, queryResults, }: {
|
|
14
25
|
dimensions: Dimensions;
|
|
15
|
-
queryResults: QueryResults
|
|
26
|
+
queryResults: QueryResults<T>;
|
|
16
27
|
}): void;
|
|
17
28
|
}
|
|
18
29
|
export {};
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import type { Metadata } from 'ember-container-query/modifiers/container-query';
|
|
2
|
-
declare const
|
|
2
|
+
declare const CqAspectRatioHelper: import("@ember/component/helper").FunctionBasedHelper<{
|
|
3
3
|
Args: {
|
|
4
|
-
Positional:
|
|
5
|
-
Named:
|
|
4
|
+
Positional: [];
|
|
5
|
+
Named: {
|
|
6
|
+
max?: number | undefined;
|
|
7
|
+
min?: number | undefined;
|
|
8
|
+
};
|
|
6
9
|
};
|
|
7
10
|
Return: Metadata;
|
|
8
11
|
}>;
|
|
9
|
-
export default
|
|
12
|
+
export default CqAspectRatioHelper;
|
|
10
13
|
//# sourceMappingURL=cq-aspect-ratio.d.ts.map
|
package/helpers/cq-height.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import type { Metadata } from 'ember-container-query/modifiers/container-query';
|
|
2
|
-
declare const
|
|
2
|
+
declare const CqHeightHelper: import("@ember/component/helper").FunctionBasedHelper<{
|
|
3
3
|
Args: {
|
|
4
|
-
Positional:
|
|
5
|
-
Named:
|
|
4
|
+
Positional: [];
|
|
5
|
+
Named: {
|
|
6
|
+
max?: number | undefined;
|
|
7
|
+
min?: number | undefined;
|
|
8
|
+
};
|
|
6
9
|
};
|
|
7
10
|
Return: Metadata;
|
|
8
11
|
}>;
|
|
9
|
-
export default
|
|
12
|
+
export default CqHeightHelper;
|
|
10
13
|
//# sourceMappingURL=cq-height.d.ts.map
|
package/helpers/cq-width.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import type { Metadata } from 'ember-container-query/modifiers/container-query';
|
|
2
|
-
declare const
|
|
2
|
+
declare const CqWidthHelper: import("@ember/component/helper").FunctionBasedHelper<{
|
|
3
3
|
Args: {
|
|
4
|
-
Positional:
|
|
5
|
-
Named:
|
|
4
|
+
Positional: [];
|
|
5
|
+
Named: {
|
|
6
|
+
max?: number | undefined;
|
|
7
|
+
min?: number | undefined;
|
|
8
|
+
};
|
|
6
9
|
};
|
|
7
10
|
Return: Metadata;
|
|
8
11
|
}>;
|
|
9
|
-
export default
|
|
12
|
+
export default CqWidthHelper;
|
|
10
13
|
//# sourceMappingURL=cq-width.d.ts.map
|
|
@@ -1,47 +1,44 @@
|
|
|
1
1
|
import Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
max: number;
|
|
5
|
-
min: number;
|
|
6
|
-
};
|
|
7
|
-
export type Features = {
|
|
8
|
-
[featureName: string]: Metadata;
|
|
9
|
-
};
|
|
10
|
-
export type Dimensions = {
|
|
2
|
+
type IndexSignatureParameter = string | number | symbol;
|
|
3
|
+
type Dimensions = {
|
|
11
4
|
aspectRatio: number;
|
|
12
5
|
height: number;
|
|
13
6
|
width: number;
|
|
14
7
|
};
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
type Metadata = {
|
|
9
|
+
dimension: 'aspectRatio' | 'height' | 'width';
|
|
10
|
+
max: number;
|
|
11
|
+
min: number;
|
|
17
12
|
};
|
|
18
|
-
|
|
13
|
+
type Features<T extends IndexSignatureParameter> = Record<T, Metadata>;
|
|
14
|
+
type QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;
|
|
15
|
+
interface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {
|
|
19
16
|
Args: {
|
|
20
17
|
Named: {
|
|
21
18
|
dataAttributePrefix?: string;
|
|
22
19
|
debounce?: number;
|
|
23
|
-
features?: Features
|
|
20
|
+
features?: Features<T>;
|
|
24
21
|
onQuery?: ({ dimensions, queryResults, }: {
|
|
25
22
|
dimensions: Dimensions;
|
|
26
|
-
queryResults: QueryResults
|
|
23
|
+
queryResults: QueryResults<T>;
|
|
27
24
|
}) => void;
|
|
28
25
|
};
|
|
29
26
|
Positional: [];
|
|
30
27
|
};
|
|
31
28
|
Element: Element;
|
|
32
29
|
}
|
|
33
|
-
export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature
|
|
30
|
+
export default class ContainerQueryModifier<T extends IndexSignatureParameter> extends Modifier<ContainerQueryModifierSignature<T>> {
|
|
34
31
|
private readonly resizeObserver;
|
|
35
32
|
dimensions: Dimensions;
|
|
36
|
-
queryResults: QueryResults
|
|
33
|
+
queryResults: QueryResults<T>;
|
|
37
34
|
private _dataAttributes;
|
|
38
35
|
private _element?;
|
|
39
36
|
private _named;
|
|
40
37
|
get dataAttributePrefix(): string;
|
|
41
38
|
get debounce(): number;
|
|
42
|
-
get features(): Features
|
|
43
|
-
constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature
|
|
44
|
-
modify(element: Element, _positional: PositionalArgs<ContainerQueryModifierSignature
|
|
39
|
+
get features(): Features<T>;
|
|
40
|
+
constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature<T>>);
|
|
41
|
+
modify(element: Element, _positional: PositionalArgs<ContainerQueryModifierSignature<T>>, named: NamedArgs<ContainerQueryModifierSignature<T>>): void;
|
|
45
42
|
private onResize;
|
|
46
43
|
private registerResizeObserver;
|
|
47
44
|
private queryContainer;
|
|
@@ -50,5 +47,5 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
|
|
|
50
47
|
private resetDataAttributes;
|
|
51
48
|
private setDataAttributes;
|
|
52
49
|
}
|
|
53
|
-
export {};
|
|
50
|
+
export { Dimensions, Features, IndexSignatureParameter, Metadata, QueryResults, };
|
|
54
51
|
//# sourceMappingURL=container-query.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-container-query",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Container queries using Ember modifiers",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"container-queries",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"lint:hbs:fix": "ember-template-lint . --fix",
|
|
36
36
|
"lint:js": "eslint . --cache --ext=.js,.ts",
|
|
37
37
|
"lint:js:fix": "eslint . --fix",
|
|
38
|
-
"lint:types": "
|
|
38
|
+
"lint:types": "glint",
|
|
39
39
|
"prepack": "ember ts:precompile",
|
|
40
40
|
"postpack": "ember ts:clean",
|
|
41
41
|
"start": "ember serve",
|
|
@@ -64,15 +64,17 @@
|
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@ember/optional-features": "^2.0.0",
|
|
67
|
-
"@ember/test-helpers": "^2.
|
|
67
|
+
"@ember/test-helpers": "^2.9.1",
|
|
68
68
|
"@embroider/test-setup": "^2.0.2",
|
|
69
|
+
"@gavant/glint-template-types": "^0.3.0",
|
|
69
70
|
"@glimmer/component": "^1.1.2",
|
|
70
71
|
"@glimmer/tracking": "^1.1.2",
|
|
72
|
+
"@glint/core": "^v1.0.0-beta.2",
|
|
73
|
+
"@glint/environment-ember-loose": "^v1.0.0-beta.2",
|
|
74
|
+
"@glint/template": "^v1.0.0-beta.2",
|
|
71
75
|
"@percy/cli": "^1.16.0",
|
|
72
76
|
"@percy/ember": "^4.0.0",
|
|
73
77
|
"@tsconfig/ember": "^1.1.0",
|
|
74
|
-
"@types/ember-qunit": "^5.0.2",
|
|
75
|
-
"@types/ember-resolver": "^5.0.13",
|
|
76
78
|
"@types/ember__application": "^4.0.5",
|
|
77
79
|
"@types/ember__array": "^4.0.3",
|
|
78
80
|
"@types/ember__component": "^4.0.11",
|
|
@@ -85,17 +87,16 @@
|
|
|
85
87
|
"@types/ember__polyfills": "^4.0.1",
|
|
86
88
|
"@types/ember__routing": "^4.0.12",
|
|
87
89
|
"@types/ember__runloop": "^4.0.2",
|
|
88
|
-
"@types/ember__service": "^4.0.
|
|
90
|
+
"@types/ember__service": "^4.0.2",
|
|
89
91
|
"@types/ember__string": "^3.0.10",
|
|
90
92
|
"@types/ember__template": "^4.0.1",
|
|
91
93
|
"@types/ember__test": "^4.0.1",
|
|
92
|
-
"@types/ember__test-helpers": "^2.8.2",
|
|
93
94
|
"@types/ember__utils": "^4.0.2",
|
|
94
95
|
"@types/htmlbars-inline-precompile": "^3.0.0",
|
|
95
96
|
"@types/qunit": "^2.19.3",
|
|
96
97
|
"@types/rsvp": "^4.0.4",
|
|
97
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
98
|
-
"@typescript-eslint/parser": "^5.
|
|
98
|
+
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
|
99
|
+
"@typescript-eslint/parser": "^5.47.0",
|
|
99
100
|
"broccoli-asset-rev": "^3.0.0",
|
|
100
101
|
"concurrently": "^7.6.0",
|
|
101
102
|
"d3-array": "^3.2.1",
|
|
@@ -117,22 +118,23 @@
|
|
|
117
118
|
"ember-load-initializers": "^2.1.2",
|
|
118
119
|
"ember-named-blocks-polyfill": "^0.2.5",
|
|
119
120
|
"ember-page-title": "^7.0.0",
|
|
120
|
-
"ember-qunit": "^6.
|
|
121
|
-
"ember-resolver": "^
|
|
122
|
-
"ember-source": "~4.9.
|
|
121
|
+
"ember-qunit": "^6.1.1",
|
|
122
|
+
"ember-resolver": "^9.0.0",
|
|
123
|
+
"ember-source": "~4.9.3",
|
|
123
124
|
"ember-source-channel-url": "^3.0.0",
|
|
124
125
|
"ember-svg-jar": "^2.4.2",
|
|
125
|
-
"ember-template-lint": "^5.
|
|
126
|
+
"ember-template-lint": "^5.3.0",
|
|
126
127
|
"ember-template-lint-plugin-prettier": "^4.1.0",
|
|
127
128
|
"ember-truth-helpers": "^3.1.1",
|
|
128
129
|
"ember-try": "^2.0.0",
|
|
129
|
-
"eslint": "^8.
|
|
130
|
+
"eslint": "^8.30.0",
|
|
130
131
|
"eslint-config-prettier": "^8.5.0",
|
|
131
|
-
"eslint-plugin-ember": "^11.
|
|
132
|
+
"eslint-plugin-ember": "^11.3.0",
|
|
132
133
|
"eslint-plugin-n": "^15.6.0",
|
|
133
134
|
"eslint-plugin-prettier": "^4.2.1",
|
|
134
135
|
"eslint-plugin-qunit": "^7.3.4",
|
|
135
136
|
"eslint-plugin-simple-import-sort": "^8.0.0",
|
|
137
|
+
"eslint-plugin-typescript-sort-keys": "^2.1.0",
|
|
136
138
|
"lerna-changelog": "^2.2.0",
|
|
137
139
|
"loader.js": "^4.7.0",
|
|
138
140
|
"prettier": "^2.8.1",
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type ContainerQueryComponent from 'ember-container-query/components/container-query';
|
|
2
|
+
import type CqAspectRatioHelper from 'ember-container-query/helpers/cq-aspect-ratio';
|
|
3
|
+
import type CqHeightHelper from 'ember-container-query/helpers/cq-height';
|
|
4
|
+
import type CqWidthHelper from 'ember-container-query/helpers/cq-width';
|
|
5
|
+
import type ContainerQueryModifier from 'ember-container-query/modifiers/container-query';
|
|
6
|
+
export default interface EmberContainerQueryRegistry {
|
|
7
|
+
ContainerQuery: typeof ContainerQueryComponent;
|
|
8
|
+
'container-query': typeof ContainerQueryModifier;
|
|
9
|
+
'cq-aspect-ratio': typeof CqAspectRatioHelper;
|
|
10
|
+
'cq-height': typeof CqHeightHelper;
|
|
11
|
+
'cq-width': typeof CqWidthHelper;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=template-registry.d.ts.map
|
package/tsconfig.json
CHANGED
package/types/dummy/index.d.ts
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Add any types here that you need for local development only.
|
|
2
|
+
// These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
|
|
3
|
+
|
|
4
|
+
import '@glint/environment-ember-loose';
|
|
5
|
+
|
|
6
|
+
import SvgJarHelper from '@gavant/glint-template-types/types/ember-svg-jar/helpers/svg-jar';
|
|
7
|
+
import AndHelper from '@gavant/glint-template-types/types/ember-truth-helpers/helpers/and';
|
|
8
|
+
import OrHelper from '@gavant/glint-template-types/types/ember-truth-helpers/helpers/or';
|
|
9
|
+
import { ComponentLike, HelperLike } from '@glint/template';
|
|
10
|
+
import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
|
|
11
|
+
|
|
12
|
+
type NavigationNarratorComponent = ComponentLike<{
|
|
13
|
+
Args: {
|
|
14
|
+
skipTo: string;
|
|
15
|
+
};
|
|
16
|
+
}>;
|
|
17
|
+
|
|
18
|
+
type PageTitleHelper = HelperLike<{
|
|
19
|
+
Args: { Positional: [title: string] };
|
|
20
|
+
Return: void;
|
|
21
|
+
}>;
|
|
22
|
+
|
|
23
|
+
declare module '@glint/environment-ember-loose/registry' {
|
|
24
|
+
export default interface Registry extends EmberContainerQueryRegistry {
|
|
25
|
+
// Add any registry entries from other addons here that your addon itself uses (in non-strict mode templates)
|
|
26
|
+
// See https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons
|
|
27
|
+
NavigationNarrator: NavigationNarratorComponent;
|
|
28
|
+
and: typeof AndHelper;
|
|
29
|
+
or: typeof OrHelper;
|
|
30
|
+
'page-title': PageTitleHelper;
|
|
31
|
+
'svg-jar': typeof SvgJarHelper;
|
|
32
|
+
}
|
|
33
|
+
}
|