Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/crowdstrike/ember-velcro

Ember Velcro sticks one element to another with Floating UI.

https://github.com/crowdstrike/ember-velcro

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (7.8%) to scientific vocabulary

Keywords

emberjs emberjs-addon floating-ui popperjs positioning
Last synced: 5 months ago · JSON representation

Repository

Ember Velcro sticks one element to another with Floating UI.

Basic Info
  • Host: GitHub
  • Owner: CrowdStrike
  • License: mit
  • Language: TypeScript
  • Default Branch: main
  • Homepage:
  • Size: 1.95 MB
Statistics
  • Stars: 14
  • Watchers: 2
  • Forks: 9
  • Open Issues: 19
  • Releases: 10
Topics
emberjs emberjs-addon floating-ui popperjs positioning
Created over 4 years ago · Last pushed 6 months ago
Metadata Files
Readme Contributing License

README.md

Ember Velcro

Ember Velcro sticks one element to another with Floating UI, it can be used as a modifier or a component.

Several of Floating UI's functions and middleware are used to create an experience out of the box that is useful and expected.

See Floating UI's documentation for more information on any of the following included functionality.

Functions:

computePosition - computes the x and y coordinates needed to anchor a floating element to a reference element.

autoUpdate - updates the x and y coordinates of the floating element so it remains anchored to the reference element when the page scrolls or when either the reference or floating elements are resized.

Middleware:

offset - the first of the middleware included; allows you to offset the floating element from the reference element by a given amount.

flip - flips the floating element to the opposite side of the reference element to keep it in view.

shift - shifts the floating element along the x or y axis to keep it in view * x-axis for 'top' and 'bottom' placements * y-axis for 'left' and 'right' placements

hide - hides the floating element when the reference element is no longer visible or when the floating element has escaped the reference element's clipping context.

API

  • @flipOptions - see flip docs for option values
  • @middleware - array of one or more objects to add to the middleware array
  • @offsetOptions - see offset docs for option values
  • @placement - list of expected values
  • @shiftOptions - see shift docs for option values
  • @strategy - CSS position property, either 'fixed' or 'absolute'. Pros and cons of each strategy is here

Default values

  • @placement: 'bottom'
  • @strategy: 'fixed'
  • offset, flip, and shift middleware all use their defaults.
  • hide middleware uses both referenceHidden and escaped options.

Usage as Modifier

hbs <div id="hook">The `reference` element (the hook)</div> <div {{velcro "#hook"}}>The `floating` element (the loop)</div>

Usage as Component

The Velcro component yields a single hash - 2 modifiers and 'velcro data':

hbs <Velcro as |velcro|> <div {{velcro.hook}}>Velcro hook</div> <div {{velcro.loop}}>Velcro loop stuck to Velcro hook!</div> {{log "velcro data" velcro.data}} </Velcro>

velcro.data is the MiddlewareArguments object, it contains the following values:

  • x
  • y
  • initialPlacement
  • placement
  • strategy
  • middlewareData
  • rects
  • platform
  • elements

See MiddlewareArguments for a description of each.

You can also use `velcro.setHook` yielded function for more complex composibility scenarios. Expand to read more. ## `setHook` Imagine you're writing a dropdown component with ember-velcro. You want to yield a `trigger` modifier that does two things: 1. sets an element as the "hook" for ember-velcro 2. attaches a click handler to toggle between the open/closed states Without the yielded `setHook` function, this would not be possible. With `setHook` however, we can pass that function to the modifier, and the modifier can call that function with the element. Such a dropdown component might look something like this: ```gjs let myModifier = modifier((element, [setHook, handler]) => { // call ember-velcro's setHook setHook(element); // other custom logic element.addEventListener('click', handler); return () => { element.removeEventListener('click', handler); }; }); ``` This is needed because, at the time of writing, there's no way in ember to combine two existing modifiers into a single one. You can check the relevant [pull request](https://github.com/CrowdStrike/ember-velcro/pull/186) for more information.

Compatibility

  • Ember.js v3.20 or above
  • Ember CLI v3.20 or above
  • Node.js v14 or above

Installation

``` npm install ember-velcro

or

yarn add ember-velcro

or

pnpm install ember-velcro

or

ember install ember-velcro ```

Comparison to similar projects

Similar projects include:

The above projects both use Popper. In contrast, Ember Velcro uses Floating UI. Floating UI is the successor to Popper - see their migration guide for a complete comparison.

License

This project is licensed under the MIT License.

Owner

  • Name: CrowdStrike
  • Login: CrowdStrike
  • Kind: organization
  • Email: github@crowdstrike.com
  • Location: United States of America

GitHub Events

Total
  • Issues event: 1
  • Watch event: 1
  • Delete event: 10
  • Issue comment event: 15
  • Push event: 154
  • Pull request event: 29
  • Create event: 18
Last Year
  • Issues event: 1
  • Watch event: 1
  • Delete event: 10
  • Issue comment event: 15
  • Push event: 154
  • Pull request event: 29
  • Create event: 18

Committers

Last synced: almost 3 years ago

All Time
  • Total Commits: 107
  • Total Committers: 5
  • Avg Commits per committer: 21.4
  • Development Distribution Score (DDS): 0.645
Top Committers
Name Email Commits
NullVoxPopuli L****v@g****m 38
renovate[bot] 2****]@u****m 37
Cam Skene c****e@g****m 28
semantic-release-bot s****t@m****t 3
Tomster t****r@e****m 1
Committer Domains (Top 20 + Academic)
emberjs.com: 1 martynus.net: 1

Issues and Pull Requests

Last synced: 6 months ago

All Time
  • Total issues: 16
  • Total pull requests: 329
  • Average time to close issues: 4 months
  • Average time to close pull requests: 21 days
  • Total issue authors: 5
  • Total pull request authors: 9
  • Average comments per issue: 1.19
  • Average comments per pull request: 1.05
  • Merged pull requests: 270
  • Bot issues: 1
  • Bot pull requests: 297
Past Year
  • Issues: 1
  • Pull requests: 58
  • Average time to close issues: N/A
  • Average time to close pull requests: 3 days
  • Issue authors: 1
  • Pull request authors: 1
  • Average comments per issue: 0.0
  • Average comments per pull request: 0.79
  • Merged pull requests: 36
  • Bot issues: 0
  • Bot pull requests: 58
View more stats
Top Authors
Issue Authors
  • NullVoxPopuli (11)
  • camskene (2)
  • lukemelia (1)
  • nicolechung (1)
  • renovate[bot] (1)
Pull Request Authors
  • renovate[bot] (285)
  • NullVoxPopuli (16)
  • github-actions[bot] (6)
  • dependabot[bot] (6)
  • camskene (5)
  • ynotdraw (4)
  • johanrd (3)
  • Windvis (2)
  • miguelcobain (2)
Top Labels
Issue Labels
documentation (1) enhancement (1)
Pull Request Labels
released (32) dependencies (6)

Packages

  • Total packages: 1
  • Total downloads:
    • npm 8,188 last-month
  • Total dependent packages: 5
  • Total dependent repositories: 1
  • Total versions: 10
  • Total maintainers: 2
npmjs.org: ember-velcro

Ember Velcro sticks one element to another with Floating UI.

  • Versions: 10
  • Dependent Packages: 5
  • Dependent Repositories: 1
  • Downloads: 8,188 Last month
Rankings
Downloads: 2.6%
Dependent packages count: 3.7%
Average: 6.5%
Forks count: 6.5%
Stargazers count: 9.2%
Dependent repos count: 10.3%
Maintainers (2)
kellyselden crowdstrike-publisher
Last synced: 6 months ago

Dependencies

package.json npm
  • @ember/optional-features ^2.0.0 development
  • @ember/test-helpers ^2.8.1 development
  • @embroider/test-setup ^1.8.3 development
  • @glimmer/component ^1.1.2 development
  • @glimmer/tracking ^1.1.2 development
  • babel-eslint ^10.1.0 development
  • broccoli-asset-rev ^3.0.0 development
  • ember-cli ~4.7.0 development
  • ember-cli-dependency-checker ^3.3.1 development
  • ember-cli-inject-live-reload ^2.1.0 development
  • ember-cli-postcss ^8.2.0 development
  • ember-cli-sri ^2.1.1 development
  • ember-cli-terser ^4.0.2 development
  • ember-disable-prototype-extensions ^1.1.3 development
  • ember-load-initializers ^2.1.2 development
  • ember-page-title ^7.0.0 development
  • ember-qunit ^5.1.5 development
  • ember-resolver ^8.0.3 development
  • ember-source ~4.7.0 development
  • ember-source-channel-url ^3.0.0 development
  • ember-template-lint ^4.10.1 development
  • ember-try ^2.0.0 development
  • eslint ^8.23.0 development
  • eslint-config-prettier ^8.5.0 development
  • eslint-plugin-ember ^11.0.2 development
  • eslint-plugin-node ^11.1.0 development
  • eslint-plugin-prettier ^4.2.1 development
  • eslint-plugin-qunit ^7.3.1 development
  • loader.js ^4.7.0 development
  • npm-run-all ^4.1.5 development
  • prettier ^2.7.1 development
  • qunit ^2.19.1 development
  • qunit-dom ^2.0.0 development
  • tailwindcss ^3.1.8 development
  • webpack ^5.74.0 development
  • @floating-ui/dom ^1.0.1
  • ember-auto-import ^2.4.2
  • ember-cli-babel ^7.26.11
  • ember-cli-htmlbars ^6.1.0
  • ember-modifier ^3.2.7
.github/actions/assert-build/action.yml actions
  • actions/upload-artifact v3 composite
.github/actions/download-built-package/action.yml actions
  • actions/download-artifact v3 composite
.github/workflows/ci.yml actions
  • ./.github/actions/assert-build * composite
  • ./.github/actions/download-built-package * composite
  • ./.github/actions/pnpm * composite
  • actions/checkout v3 composite
  • wagoid/commitlint-github-action v5.2.0 composite
ember-velcro/package.json npm
  • @babel/core ^7.19.3 development
  • @babel/plugin-proposal-class-properties ^7.18.6 development
  • @babel/plugin-proposal-decorators ^7.19.3 development
  • @babel/preset-typescript ^7.18.6 development
  • @babel/runtime ^7.19.4 development
  • @embroider/addon-dev ^2.0.0 development
  • @glimmer/component ^1.1.2 development
  • @glimmer/tracking ^1.1.2 development
  • @glint/environment-ember-loose ^0.9.5 development
  • @glint/template ^0.9.5 development
  • @nullvoxpopuli/eslint-configs ^2.2.58 development
  • @rollup/plugin-babel ^5.3.1 development
  • @semantic-release/changelog ^6.0.0 development
  • @semantic-release/git ^10.0.0 development
  • @types/ember__debug ^4.0.1 development
  • @types/ember__destroyable ^4.0.0 development
  • babel-eslint ^10.1.0 development
  • broccoli-asset-rev ^3.0.0 development
  • concurrently ^7.4.0 development
  • ember-cli-htmlbars ^6.1.0 development
  • ember-source ~4.7.0 development
  • ember-template-lint ^4.10.1 development
  • eslint ^7.0.0 development
  • eslint-config-prettier ^8.5.0 development
  • eslint-plugin-decorator-position ^5.0.1 development
  • eslint-plugin-ember ^11.0.2 development
  • eslint-plugin-import ^2.26.0 development
  • eslint-plugin-node ^11.1.0 development
  • eslint-plugin-prettier ^4.2.1 development
  • eslint-plugin-qunit ^7.3.1 development
  • npm-run-all ^4.1.5 development
  • prettier ^2.7.1 development
  • rollup ^2.79.1 development
  • rollup-plugin-copy ^3.4.0 development
  • rollup-plugin-ts ^3.0.2 development
  • semantic-release ^19.0.0 development
  • typescript ^4.8.4 development
  • webpack ^5.74.0 development
  • @embroider/addon-shim ^1.0.0
  • @floating-ui/dom ^1.0.1
  • ember-functions-as-helper-polyfill ^2.1.1
  • ember-modifier ^3.2.7
pnpm-lock.yaml npm
  • 1860 dependencies
test-app/package.json npm
  • @babel/core ^7.20.12 development
  • @ember/optional-features ^2.0.0 development
  • @ember/test-helpers ^2.9.3 development
  • @embroider/compat ^1.9.0 development
  • @embroider/core ^1.9.0 development
  • @embroider/test-setup ^1.8.3 development
  • @embroider/webpack ^1.9.0 development
  • @floating-ui/dom ^1.2.1 development
  • @glimmer/component ^1.1.2 development
  • @glimmer/tracking ^1.1.2 development
  • @glint/core ^0.9.7 development
  • @glint/environment-ember-loose ^0.9.5 development
  • @glint/environment-ember-template-imports ^0.9.5 development
  • @glint/template ^0.9.5 development
  • @nullvoxpopuli/eslint-configs ^2.2.58 development
  • @tsconfig/ember ^1.1.0 development
  • @types/ember ^4.0.1 development
  • @types/ember-qunit ^5.0.2 development
  • @types/ember-resolver ^5.0.11 development
  • @types/ember__application ^4.0.2 development
  • @types/ember__array ^4.0.2 development
  • @types/ember__component ^4.0.10 development
  • @types/ember__controller ^4.0.1 development
  • @types/ember__debug ^4.0.1 development
  • @types/ember__engine ^4.0.2 development
  • @types/ember__error ^4.0.0 development
  • @types/ember__object ^4.0.4 development
  • @types/ember__polyfills ^4.0.0 development
  • @types/ember__routing ^4.0.11 development
  • @types/ember__runloop ^4.0.1 development
  • @types/ember__service ^4.0.0 development
  • @types/ember__string ^3.0.9 development
  • @types/ember__template ^4.0.0 development
  • @types/ember__test ^4.0.0 development
  • @types/ember__test-helpers ^2.8.1 development
  • @types/ember__utils ^4.0.1 development
  • @types/qunit ^2.19.3 development
  • @types/rsvp ^4.0.4 development
  • babel-eslint ^10.1.0 development
  • broccoli-asset-rev ^3.0.0 development
  • ember-auto-import ^2.5.0 development
  • ember-cli ~4.10.0 development
  • ember-cli-app-version ^5.0.0 development
  • ember-cli-babel ^7.26.11 development
  • ember-cli-dependency-checker ^3.3.1 development
  • ember-cli-htmlbars ^6.2.0 development
  • ember-cli-inject-live-reload ^2.1.0 development
  • ember-cli-sri ^2.1.1 development
  • ember-cli-terser ^4.0.2 development
  • ember-fetch ^8.1.2 development
  • ember-load-initializers ^2.1.2 development
  • ember-page-title ^7.0.0 development
  • ember-qunit ^5.1.5 development
  • ember-resolver ^8.0.3 development
  • ember-source ~4.6.0 development
  • ember-source-channel-url ^3.0.0 development
  • ember-template-imports ^3.1.2 development
  • ember-template-lint ^4.10.1 development
  • ember-try ^2.0.0 development
  • ember-welcome-page ^6.2.0 development
  • eslint ^7.32.0 development
  • eslint-config-prettier ^8.5.0 development
  • eslint-plugin-ember ^11.0.2 development
  • eslint-plugin-node ^11.1.0 development
  • eslint-plugin-prettier ^4.2.1 development
  • eslint-plugin-qunit ^7.3.1 development
  • loader.js ^4.7.0 development
  • npm-run-all ^4.1.5 development
  • prettier ^2.7.1 development
  • qunit ^2.19.4 development
  • qunit-dom ^2.0.0 development
  • tailwindcss ^3.2.6 development
  • typescript ~4.9.5 development
  • webpack ^5.74.0 development
  • ember-velcro link:../ember-velcro
.github/workflows/push-dist.yml actions
  • actions/checkout v3 composite
  • kategengler/put-built-npm-package-contents-on-branch v1.0.0 composite
  • wyvox/action-setup-pnpm v2 composite