nullvoxpopuli / ember-popperjs Goto Github PK

View Code? Open in Web Editor NEW

25.0 4.0 4.0 1.6 MB

Renderless Component for Popper.JS for you to easily make popovers in Ember.JS

License: MIT License

JavaScript 47.80% TypeScript 40.18% HTML 11.67% Handlebars 0.36%

ember emberjs hacktoberfest popperjs

ember-popperjs's Introduction

ember-popperjs

A single <PopperJS> component with easy to use API for creating popovers, tooltips, etc.

Compatibility

Ember.js v3.25 or above
Ember CLI v3.25 or above
Webpack v5 or above
ember-auto-import v2 or above

Installation

ember install ember-popperjs

Usage

Example building a <Menu /> component

<PopperJS as |reference popover|>
  <button {{reference}} {{on "click" this.yourClickHandler}}>
    {{yield to="trigger"}}
  </button>

  {{#if this.yourVisibilityIndicator}}
    <div {{popover}}>
      This is a popover!
      {{yield to="default"}}
    </div>
  {{/if}}
</PopperJS>

Things <PopperJS> does not do:

provide styles for making a popover
provide click handlers for showing and hiding the popover

However, this addon pairs nicely with Tailwind CSS and HeadlessUI and a menu popover may look like:

<Menu as |menu|>
  <PopperJS as |reference popover|>
    <menu.Button
      {{reference}}
      class="
        text-black
        relative rounded-sm border border-gray-900 bg-white px-2 py-1 -my-1 text-left
        transition ease-in-out duration-150 sm:text-sm
        focus:ring-4 focus-visible:outline-none focus:outline-none
      "
      ...attributes
    >
      {{yield menu to="trigger"}}
    </menu.Button>

    <menu.Items
      {{popover}}
      class="absolute top-2 z-20 grid mt-1 rounded-sm bg-white shadow-lg min-w-max"
      as |items|
    >
      {{yield (component 'limber/menu/button' item=items.Item) to="options"}}
    </menu.Items>
  </PopperJS>
</Menu>

<Menu> provides the click handlers and visibility controls that make a popover behave as you would expect.

API

yield parameters

<PopperJS as |reference popover|>
  ...
</PopperJS>

reference - modifier - sets up the target element for the popover element to position itself to
popover - modifier - attaches to the element that is the container of the popover content

arguments

`@placement`

The default placement is "bottom-end", but any placement described by the Placement options on the popper.js site will work.

For example,

<PopperJS @placement="top" as |reference popover|>
  ...
</PopperJS>

`@options`

If the default options don't suit you, you may override them entirely. These options are not merged with any defaults, but allow straight pass-through, of the Popper.js Options object.

Additionally, some options require references to the reference element as well as the popover element, so if you need that level of flexibility, @options may also be a function with the following signature:

(reference: HTMLElement, popover: HTMLElement) => Partial<Options>;

Note that if using @options, @placement will be ignored.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-popperjs's People

Contributors

Stargazers

Watchers

Forkers

himynameisjonas michalbryxi knownasilya bartocc

ember-popperjs's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

chore(deps): update devdependencies (major) (@ember/test-helpers, @embroider/addon-dev, @embroider/compat, @embroider/core, @embroider/test-setup, @embroider/webpack, @nullvoxpopuli/eslint-configs, @tsconfig/ember, concurrently, ember-cli, ember-cli-babel, ember-modifier, ember-qunit, ember-resolver, ember-source, ember-try, eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-qunit, prettier, qunit-dom, rollup, rollup-plugin-ts, typescript)
chore(deps): update node.js to v20
🔐 Create all rate-limited PRs at once 🔐

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update dependency semantic-release to v19.0.3 [security]
chore(deps): update dependency webpack to v5.76.0 [security]

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/actions/assert-build/action.yml

actions/upload-artifact v3

.github/actions/download-built-package/action.yml

actions/download-artifact v3

.github/actions/pnpm/action.yml

pnpm/action-setup v2.2.4

actions/setup-node v3

.github/workflows/ci.yml

actions/checkout v3

actions/checkout v3

actions/checkout v3

wagoid/commitlint-github-action v5.3.1

actions/checkout v3

actions/checkout v3

actions/checkout v3

actions/checkout v3

actions/checkout v3

actions/checkout v3

npm

ember-popperjs/package.json

@babel/core ^7.18.2

@babel/plugin-proposal-class-properties ^7.17.12

@babel/plugin-proposal-decorators ^7.18.2

@babel/plugin-syntax-decorators ^7.17.12

@babel/plugin-transform-typescript ^7.18.4

@babel/preset-typescript ^7.17.12

@embroider/addon-dev ^3.0.0

@glimmer/component ^1.1.2

@glimmer/tracking ^1.1.2

@nullvoxpopuli/eslint-configs ^2.2.20

@semantic-release/changelog ^6.0.1

@semantic-release/git ^10.0.1

@types/ember__component ^4.0.4

@types/ember__destroyable ^4.0.0

@types/ember__object ^4.0.0

@babel/eslint-parser ^7.11.0

concurrently ^7.2.1

ember-cli-htmlbars ^6.0.0

ember-modifier ^3.2.7

eslint ^8.0.0

eslint-config-prettier ^8.3.0

eslint-plugin-decorator-position ^5.0.0

eslint-plugin-ember ^11.0.0

eslint-plugin-import ^2.25.4

eslint-plugin-json ^3.1.0

eslint-plugin-node ^11.1.0

eslint-plugin-prettier ^4.0.0

eslint-plugin-simple-import-sort ^10.0.0

prettier ^2.0.0

rollup ^2.75.3

rollup-plugin-ts ^2.0.7

semantic-release ^19.0.2

tslib ^2.4.0

typescript ^4.5.5

package.json

node 18.15.0

pnpm 7

test-app/package.json

@babel/core ^7.0.0

@ember/optional-features ^2.0.0

@ember/test-helpers ^2.6.0

@embroider/compat ^2.0.0

@embroider/core ^2.0.0

@embroider/test-setup ^2.0.0

@embroider/webpack ^2.0.0

@glimmer/component ^1.1.2

@glimmer/tracking ^1.1.2

@tsconfig/ember ^2.0.0

@types/ember ^4.0.0

@types/ember-data ^4.0.0

@types/ember-data__adapter ^4.0.0

@types/ember-data__model ^4.0.0

@types/ember-data__serializer ^4.0.0

@types/ember-data__store ^4.0.0

@types/ember-qunit ^5.0.0

@types/ember-resolver ^5.0.11

@types/ember__application ^4.0.0

@types/ember__array ^4.0.1

@types/ember__component ^4.0.8

@types/ember__controller ^4.0.0

@types/ember__debug ^4.0.1

@types/ember__engine ^4.0.0

@types/ember__error ^4.0.0

@types/ember__object ^4.0.2

@types/ember__polyfills ^4.0.0

@types/ember__routing ^4.0.7

@types/ember__runloop ^4.0.1

@types/ember__service ^4.0.0

@types/ember__string ^3.0.9

@types/ember__template ^4.0.0

@types/ember__test ^4.0.0

@types/ember__test-helpers ^2.6.1

@types/ember__utils ^4.0.0

@types/htmlbars-inline-precompile ^3.0.0

@types/qunit ^2.11.3

@types/rsvp ^4.0.4

@babel/eslint-parser ^7.11.0

broccoli-asset-rev ^3.0.0

ember-auto-import ^2.4.2

ember-cli ~4.11.0

ember-cli-app-version ^6.0.0

ember-cli-babel ^7.26.11

ember-cli-dependency-checker ^3.2.0

ember-cli-htmlbars ^6.0.1

ember-cli-inject-live-reload ^2.1.0

ember-cli-typescript ^5.1.0

ember-load-initializers ^2.1.2

ember-qunit ^6.0.0

ember-resolver ^8.0.3

ember-source ~4.11.0

ember-source-channel-url ^3.0.0

ember-template-lint ^5.0.0

ember-try ^2.0.0

eslint ^8.0.0

eslint-config-prettier ^8.3.0

eslint-plugin-ember ^11.0.0

eslint-plugin-node ^11.1.0

eslint-plugin-prettier ^4.0.0

eslint-plugin-qunit ^7.2.0

loader.js ^4.7.0

npm-run-all ^4.1.5

prettier ^2.5.1

qunit ^2.17.2

qunit-dom ^2.0.0

typescript ^4.7.2

webpack ^5.72.1

Check this box to trigger a request for Renovate to run again on this repository

Doesn't work with overflow:hidden

The popover doesn't actually render outside of where it's defined. Shouldn't it render in the body to overcome issues with overflow? Seems that's one of the main features of popper. Not sure why it doesn't work in that scenario.

The automated release is failing 🚨

🚨 The automated release from the `main` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Styling popover with same width as reference

Any way to do that?

feature request: provide an optional {{reference}} modifier

Currently, the this._referenceElement always refers to the trigger element, but in practice, some cases do not fit in this assumption.

For example, consider this UI pattern:

The Trigger is the little downward triangle (with a light gray hovering background)
The entire button surrounded with dark gray border is the Reference
The Popover is the menu

Users can only show the popover menu by clicking the downward triangle precisely, but not the entire button because the whole button has a different interactive meaning here (that is, clicking to select/unselect)

However, we still need the entire button to be the reference element because we need to align the popover menu with the left side of the button as the whole, not the downward angle.

If developers can specify the reference element optionally, they can archive this pattern easily and quickly.

In our application, we use ember-ref-bucket to hold a reference element and pass it to the popperjs modifier (we made our popperjs modifier before, but we would like to use this addon instead).

Maybe a better way is to provide an optional {{reference}} modifier, so developers can use it to assign a custom element instead of always as the same as the trigger element.

SVG

Seems like it works with SVGs but get type errors

Collaborate with ember-popper-modifier?

Are you open to collaborate in development with ember-popper-modifier? I see that there are different approaches on the public API design. I see benefits from both. Not saying that we should drop either or. But maybe we could reuse as much code as possible between both addons?

I haven't looked into the tiny details yet, but I have a gut feeling that ember-popper-modifier may provide the low-level primitives needed to build ember-popperjs. Having one providing low-level primitives while the other provides APIs with better developer ergonomics would be one option to draw boundaries.

My main motivation is reducing maintenance costs for overall community. Ownership shouldn't be an issue anymore since ember-popper-modifier has been moved to adopted-ember-addons org.

Don't destroy the popper instance when args change

Demo

Ideally, changes to args keep the popper instance, if active