diff --git a/README.md b/README.md index cf55bc2..fcea8e7 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ See [detailed comparison](#comparison) with code samples. - [Customizing attribute prefix](#customizing-attribute-prefix) - [Using multiple modifiers on the same element](#using-multiple-modifiers-on-the-same-element) - [Disabling](#disabling) + - [Customizing component element](#customizing-component-element) - [FastBoot fallback](#fastboot-fallback) - [Browser support](#browser-support) - [Alternatives](#alternatives) @@ -93,9 +94,10 @@ This addon is in active development. * [x] Accepts `sizes` * [x] Accepts `prefix` * [x] Accepts `dimension` + * [x] Accepts `tagName` * [x] Disabling -* [ ] Expose types -* [ ] CI +* [x] Expose types +* [x] CI * [ ] npm package * [ ] Documentation * [x] Concept @@ -572,6 +574,25 @@ Pass a truthy value into `isDisabled` to disable element query functionality: +### Customizing component element + +The `` component accepts a `@tagName` argument that allows tweaking the component's root tag: + +```hbs + + The sidebar + +``` + +This wouuld result in the followingg HTML rendered (element query tags not shown): + +```html + +``` + + ### FastBoot fallback Unfortunately, FastBoot does not have information about user's screen size. When a user vistis a FastBoot-driven website, they initially see a page without any `ember-element-query` attributes. When FastBoot rehydrates, element queries kick in. As a result, page layout may suddenly change after the user has already started reading and scrolling, causing frustration. diff --git a/app/templates/components/element-query.hbs b/app/templates/components/element-query.hbs index 49a0c83..f8e743f 100644 --- a/app/templates/components/element-query.hbs +++ b/app/templates/components/element-query.hbs @@ -1,16 +1,18 @@ -
- {{yield this.eqInfo.attributesRecord this.eqInfo}} -
+ ...attributes + > + {{yield this.eqInfo.attributesRecord this.eqInfo}} + +{{/let}} diff --git a/package.json b/package.json index c88b2b4..8115436 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "ember-cli-babel": "^7.26.3", "ember-cli-htmlbars": "5.7.1", "ember-cli-typescript": "^4.2.1", + "ember-element-helper": "^0.5.5", "ember-modifier": "^2.1.2", "ember-resize-observer-modifier": "^1.1.1", "ember-window-mock": "^0.7.2" diff --git a/tests/integration/component-test.ts b/tests/integration/component-test.ts index e914337..15558f4 100644 --- a/tests/integration/component-test.ts +++ b/tests/integration/component-test.ts @@ -1065,4 +1065,14 @@ module('Integration | Component | element-query', function (hooks) { m = 'If clause'; assert.ok(find('[data-test-combined-2]'), m); }); + + test("Tweaking component's tag", async function (assert) { + await render(hbs` + + `); + + const element = find('aside') as HTMLElement | null; + + assert.dom(element).hasClass('ElementQuery'); + }); }); diff --git a/yarn.lock b/yarn.lock index 610c743..4e5f14a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1872,6 +1872,31 @@ resolve "^1.8.1" semver "^7.3.2" +"@embroider/macros@0.41.0": + version "0.41.0" + resolved "https://registry.yarnpkg.com/@embroider/macros/-/macros-0.41.0.tgz#3e78b6f388d7229906abf4c75edfff8bb0208aca" + integrity sha512-QISzwEEfLsskZeL0jyZDs1RoQSotwBWj+4upTogNHuxQP5j/9H3IMG/3QB1gh8GEpbudATb/cS4NDYK3UBxufw== + dependencies: + "@embroider/shared-internals" "0.41.0" + assert-never "^1.1.0" + ember-cli-babel "^7.23.0" + lodash "^4.17.10" + resolve "^1.8.1" + semver "^7.3.2" + +"@embroider/shared-internals@0.41.0": + version "0.41.0" + resolved "https://registry.yarnpkg.com/@embroider/shared-internals/-/shared-internals-0.41.0.tgz#2553f026d4f48ea1fd11235501feb63bf49fa306" + integrity sha512-fiqUVB6cfh2UBEFE4yhT5EzagkZ1Q26+OhBV0nJszFEJZx4DqVIb3pxSSZ8P+HhpxuJsQ2XpMA/j02ZPFZfbdQ== + dependencies: + ember-rfc176-data "^0.3.17" + fs-extra "^7.0.1" + lodash "^4.17.10" + pkg-up "^3.1.0" + resolve-package-path "^1.2.2" + semver "^7.3.2" + typescript-memoize "^1.0.0-alpha.3" + "@embroider/test-setup@^0.42.2": version "0.42.2" resolved "https://registry.yarnpkg.com/@embroider/test-setup/-/test-setup-0.42.2.tgz#d7b04e8081c4adb598f554448bc49fe1bbcc6253" @@ -1880,6 +1905,15 @@ lodash "^4.17.21" resolve "^1.20.0" +"@embroider/util@^0.39.1 || ^0.40.0 || ^0.41.0": + version "0.41.0" + resolved "https://registry.yarnpkg.com/@embroider/util/-/util-0.41.0.tgz#5324cb4742aa4ed8d613c4f88a466f73e4e6acc1" + integrity sha512-ytA3J/YfQh7FEUEBwz3ezTqQNm/S5et5rZw3INBIy4Ak4x0NXV/VXLjyL8mv3txL8fGknZTBdXEhDsHUKIq8SQ== + dependencies: + "@embroider/macros" "0.41.0" + broccoli-funnel "^3.0.5" + ember-cli-babel "^7.23.1" + "@eslint/eslintrc@^0.4.2": version "0.4.2" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179" @@ -4282,7 +4316,7 @@ broccoli-funnel@^2.0.0, broccoli-funnel@^2.0.1, broccoli-funnel@^2.0.2: symlink-or-copy "^1.0.0" walk-sync "^0.3.1" -broccoli-funnel@^3.0.3, broccoli-funnel@^3.0.6: +broccoli-funnel@^3.0.3, broccoli-funnel@^3.0.5, broccoli-funnel@^3.0.6: version "3.0.8" resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-3.0.8.tgz#f5b62e2763c3918026a15a3c833edc889971279b" integrity sha512-ng4eIhPYiXqMw6SyGoxPHR3YAwEd2lr9FgBI1CyTbspl4txZovOsmzFkMkGAlu88xyvYXJqHiM2crfLa65T1BQ== @@ -5938,7 +5972,7 @@ ember-cli-babel@^7.0.0, ember-cli-babel@^7.10.0, ember-cli-babel@^7.13.0, ember- rimraf "^3.0.1" semver "^5.5.0" -ember-cli-babel@^7.13.2, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.26.2, ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.6: +ember-cli-babel@^7.13.2, ember-cli-babel@^7.17.2, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.26.2, ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.6: version "7.26.6" resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.6.tgz#322fbbd3baad9dd99e3276ff05bc6faef5e54b39" integrity sha512-040svtfj2RC35j/WMwdWJFusZaXmNoytLAMyBDGLMSlRvznudTxZjGlPV6UupmtTBApy58cEF8Fq4a+COWoEmQ== @@ -5987,7 +6021,7 @@ ember-cli-get-component-path-option@^1.0.0: resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771" integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E= -ember-cli-htmlbars@5.7.1, ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1: +ember-cli-htmlbars@5.7.1, ember-cli-htmlbars@^5.1.0, ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.7.1.tgz#eb5b88c7d9083bc27665fb5447a9b7503b32ce4f" integrity sha512-9laCgL4tSy48orNoQgQKEHp93MaqAs9ZOl7or5q+8iyGGJHW6sVXIYrVv5/5O9HfV6Ts8/pW1rSoaeKyLUE+oA== @@ -6366,6 +6400,15 @@ ember-disable-prototype-extensions@^1.1.3: resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e" integrity sha1-GWkTUhdlS14nj5/i2dTkm1cgMp4= +ember-element-helper@^0.5.5: + version "0.5.5" + resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.5.5.tgz#4a9ecb4dce57ee7f5ceb868a53c7b498c729f056" + integrity sha512-Tu3hsI+/mjHBUvw62Qi+YDZtKkn59V66CjwbgfNTZZ7aHf4gFm1ow4zJ4WLnpnie8p9FvOmIUxwl5HvgPJIcFA== + dependencies: + "@embroider/util" "^0.39.1 || ^0.40.0 || ^0.41.0" + ember-cli-babel "^7.17.2" + ember-cli-htmlbars "^5.1.0" + ember-export-application-global@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"