ember-container-query 5.1.0 → 5.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
CHANGED
|
@@ -359,11 +359,9 @@ For more examples, I encourage you to check out the code for my demo app. It is
|
|
|
359
359
|
|
|
360
360
|
## Compatibility
|
|
361
361
|
|
|
362
|
-
- Ember.js v4.12 or above
|
|
362
|
+
- Ember.js v4.12 or above
|
|
363
363
|
- Node.js v18 or above
|
|
364
364
|
|
|
365
|
-
<sup>1. `ember-container-query` may work on older versions of Ember (e.g. `4.4`), but issues that arise from these won't be supported.</sup>
|
|
366
|
-
|
|
367
365
|
|
|
368
366
|
## Contributing
|
|
369
367
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container-query.d.ts","sourceRoot":"","sources":["../../src/components/container-query.ts"],"names":[],"mappings":"AAAA,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,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;IAErC,WAAW,
|
|
1
|
+
{"version":3,"file":"container-query.d.ts","sourceRoot":"","sources":["../../src/components/container-query.ts"],"names":[],"mappings":"AAAA,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,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;IAErC,WAAW,GAAI,+BAGZ;QACD,UAAU,EAAE,UAAU,CAAC;QACvB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;KAC/B,KAAG,IAAI,CAGN;CA4BH"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { registerDestructor } from '@ember/destroyable';
|
|
2
2
|
import { action } from '@ember/object';
|
|
3
3
|
import { debounce } from '@ember/runloop';
|
|
4
|
-
import {
|
|
4
|
+
import { service } from '@ember/service';
|
|
5
5
|
import Modifier from 'ember-modifier';
|
|
6
6
|
import { g, i, n } from 'decorator-transforms/runtime';
|
|
7
7
|
|
|
8
8
|
class ContainerQueryModifier extends Modifier {
|
|
9
9
|
static {
|
|
10
|
-
g(this.prototype, "resizeObserver", [
|
|
10
|
+
g(this.prototype, "resizeObserver", [service]);
|
|
11
11
|
}
|
|
12
12
|
#resizeObserver = (i(this, "resizeObserver"), void 0);
|
|
13
13
|
dimensions;
|
|
@@ -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 {
|
|
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 { service } from '@ember/service';\nimport type { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\nimport Modifier 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 declare private 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 // eslint-disable-next-line ember/no-runloop\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 type {\n Dimensions,\n Features,\n IndexSignatureParameter,\n Metadata,\n QueryResults,\n};\n"],"names":["ContainerQueryModifier","Modifier","g","prototype","service","i","void 0","dimensions","queryResults","_dataAttributes","_element","_named","dataAttributePrefix","debounce","features","constructor","owner","args","registerDestructor","resizeObserver","unobserve","onResize","modify","element","_positional","named","registerResizeObserver","queryContainer","resizeObserverEntry","target","_debounce","n","action","observe","measureDimensions","evaluateQueries","resetDataAttributes","setDataAttributes","onQuery","height","clientHeight","width","clientWidth","aspectRatio","featureName","metadata","Object","entries","dimension","min","max","value","forEach","dataAttribute","removeAttribute","prefix","meetsFeature","String","setAttribute","push"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ember-container-query",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"description": "Make container queries that harness the power of Ember",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"container-queries",
|
|
@@ -65,20 +65,19 @@
|
|
|
65
65
|
"@glint/environment-ember-loose": "^1.5.2",
|
|
66
66
|
"@glint/environment-ember-template-imports": "^1.5.2",
|
|
67
67
|
"@glint/template": "^1.5.2",
|
|
68
|
-
"@ijlee2-frontend-configs/ember-template-lint": "^0.
|
|
69
|
-
"@ijlee2-frontend-configs/eslint-config-ember": "^0.
|
|
68
|
+
"@ijlee2-frontend-configs/ember-template-lint": "^0.5.0",
|
|
69
|
+
"@ijlee2-frontend-configs/eslint-config-ember": "^0.3.1",
|
|
70
70
|
"@ijlee2-frontend-configs/prettier": "^0.2.1",
|
|
71
71
|
"@ijlee2-frontend-configs/typescript": "^0.3.1",
|
|
72
72
|
"@rollup/plugin-babel": "^6.0.4",
|
|
73
73
|
"babel-plugin-ember-template-compilation": "^2.3.0",
|
|
74
74
|
"concurrently": "^9.1.2",
|
|
75
75
|
"ember-source": "^6.2.0",
|
|
76
|
-
"ember-template-lint": "^
|
|
76
|
+
"ember-template-lint": "^7.0.1",
|
|
77
77
|
"eslint": "^9.21.0",
|
|
78
|
-
"prettier": "^3.5.
|
|
79
|
-
"rollup": "^4.34.
|
|
80
|
-
"
|
|
81
|
-
"typescript": "^5.7.3"
|
|
78
|
+
"prettier": "^3.5.3",
|
|
79
|
+
"rollup": "^4.34.9",
|
|
80
|
+
"typescript": "^5.8.2"
|
|
82
81
|
},
|
|
83
82
|
"engines": {
|
|
84
83
|
"node": "18.* || >= 20"
|