ember-velcro 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# 1.0.0 (2022-09-27)
+
+
+### Bug Fixes
+
+* cleanup popper ([da193d9](https://github.com/camskene/ember-velcro/commit/da193d97e696d12a2c5ba44f63d1c7a1d09e926c))
+* cleanup ResizeObserver ([5a05ff2](https://github.com/camskene/ember-velcro/commit/5a05ff26fb8981a1ba28401dc66cb80508ffb834))
+* **release:** add semantic release config to package.json ([e3f9ccb](https://github.com/camskene/ember-velcro/commit/e3f9ccbb412d37c095e654fa3857b9b648227709))
+* remove unused dependency ([3fa4854](https://github.com/camskene/ember-velcro/commit/3fa4854505d7309d4f9615eb8281cf05299a5f21))
+* rename offset args ([8fdf4e1](https://github.com/camskene/ember-velcro/commit/8fdf4e18a5737f44211b4ee9a6f09f73678f4dca))
+* update readme and package details ([21dd7f6](https://github.com/camskene/ember-velcro/commit/21dd7f6744be5efa5708c8e476e9266b1eb1f5d6))
+* update to Ember v4.6.0 ([a529ef0](https://github.com/camskene/ember-velcro/commit/a529ef09a9370f974304b8e9debf1880eb5ffe7b))
+
+
+* feat!: add velcro modifier ([4724a30](https://github.com/camskene/ember-velcro/commit/4724a30e4f3326a3909efede31124cc3cced2862))
+
+
+### Features
+
+* add modifiers, strategy, and onFirstUpdate to args ([0a12c39](https://github.com/camskene/ember-velcro/commit/0a12c3948fdebe59388d1c25b129a1b199efc465))
+* add offsetX, offsetY, and placement to args ([0dfa444](https://github.com/camskene/ember-velcro/commit/0dfa4440063a0e2d6ee74fd0ceb42879c92630ce))
+* add options for flip and shift middleware ([2229496](https://github.com/camskene/ember-velcro/commit/2229496be892572a0953ab113541f0eda490787d))
+* add velcro component ([b5e6f31](https://github.com/camskene/ember-velcro/commit/b5e6f313a38b0eb359bdc7d5d6ce96d38295c6f1))
+* basic demo ([1484983](https://github.com/camskene/ember-velcro/commit/148498338e5eac273eb2f16da0f7a72e68152a1e))
+* create popper and yield modifiers ([50cc8bc](https://github.com/camskene/ember-velcro/commit/50cc8bc2118ea1202ad24f200b957d728fab2b51))
+* handle targetElement or popoverElement resize ([1398f89](https://github.com/camskene/ember-velcro/commit/1398f89a9586b901248e85490a6427df67a4e50c))
+* migrate from popperjs to floating-ui ([06d6e90](https://github.com/camskene/ember-velcro/commit/06d6e90cd706159b6b189d644d0bc8a65229c5c4))
+
+
+### BREAKING CHANGES
+
+* arguments to middleware are now composed of the
+middleware name + 'Options'.
+
+eg `@offset` -> `@offsetOptions`
+* https://floating-ui.com/docs/migration

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2021
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+Ember Velcro
+==============================================================================
+
+Ember Velcro sticks one element to another with [Floating UI](https://floating-ui.com/), it can be used as a modifier or a component.
+
+Several of Floating UI's functions and [middleware](https://floating-ui.com/docs/middleware) are used to create an experience out of the box that is useful and expected.
+
+See Floating UI's [documentation](https://floating-ui.com/docs/getting-started) for more information on any of the following included functionality.
+
+Functions:
+
+[computePosition](https://floating-ui.com/docs/computePosition) - computes the x and y coordinates needed to anchor a floating element to a reference element.
+
+[autoUpdate](https://floating-ui.com/docs/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](https://floating-ui.com/docs/offset) - the first of the middleware included; allows you to offset the floating element from the reference element by a given amount.
+
+[flip](https://floating-ui.com/docs/flip) - flips the floating element to the opposite side of the reference element to keep it in view.
+
+[shift](https://floating-ui.com/docs/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](https://floating-ui.com/docs/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](https://floating-ui.com/docs/flip) for option values
+* `@middleware` - array of one or more objects to add to the [middleware](https://floating-ui.com/docs/middleware) array
+* `@offsetOptions` - see [offset docs](https://floating-ui.com/docs/offset) for option values
+* `@placement` - list of [expected values](https://floating-ui.com/docs/computeposition#placement)
+* `@shiftOptions` - see [shift docs](https://floating-ui.com/docs/shift) for option values
+* `@strategy` - CSS position property, either 'fixed' or 'absolute'. Pros and cons of each strategy is [here](https://floating-ui.com/docs/computePosition#strategy)
+
+
+Default values
+------------------------------------------------------------------------------
+
+* `@placement`: 'bottom'
+* `@strategy`: 'fixed'
+* `offset`, `flip`, and `shift` middleware all use their defaults.
+* `hide` middleware uses both `referenceHidden` and `escaped` [options](https://floating-ui.com/docs/hide#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](https://floating-ui.com/docs/middleware#middlewarearguments) for a description of each.
+
+Compatibility
+------------------------------------------------------------------------------
+
+* Ember.js v3.20 or above
+* Ember CLI v3.20 or above
+* Node.js v14 or above
+
+
+Installation
+------------------------------------------------------------------------------
+
+```
+ember install github:camskene/ember-velcro
+```
+
+Contributing
+------------------------------------------------------------------------------
+
+Ember Velcro is currently written primarily for my own fun and education.
+
+License
+------------------------------------------------------------------------------
+
+This project is licensed under the [MIT License](LICENSE.md).

package/addon/components/velcro/index.hbs

@@ -0,0 +1,16 @@
+{{yield (hash
+  hook=this.velcroHook
+  loop=(if this.hook (modifier this.velcroLoop
+    this.hook
+    flipOptions=@flipOptions
+    hideOptions=@hideOptions
+    middleware=@middleware
+    offsetOptions=@offsetOptions
+    placement=@placement
+    shiftOptions=@shiftOptions
+    strategy=@strategy
+    setVelcroData=this.setVelcroData
+  ))
+  data=this.velcroData
+)}}
+

package/addon/components/velcro/index.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { modifier } from 'ember-modifier';
+import VelcroModifier from 'ember-velcro/modifiers/velcro';
+
+export default class VelcroComponent extends Component {
+  @tracked hook = undefined;
+
+  // set by VelcroModifier
+  @tracked velcroData = undefined;
+
+  setVelcroData = (data) => (this.velcroData = data);
+
+  velcroHook = modifier(
+    (element) => {
+      this.hook = element;
+    },
+    { eager: false }
+  );
+
+  velcroLoop = VelcroModifier;
+}

package/addon/middleware/velcro-data.js

@@ -0,0 +1,11 @@
+export function velcroData() {
+  return {
+    name: 'metadata',
+    fn: (data) => {
+      // https://floating-ui.com/docs/middleware#always-return-an-object
+      return {
+        data,
+      };
+    },
+  };
+}

package/addon/modifiers/velcro.js

@@ -0,0 +1,71 @@
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+
+import { autoUpdate, computePosition, flip, hide, offset, shift } from '@floating-ui/dom';
+import Modifier from 'ember-modifier';
+import { velcroData } from 'ember-velcro/middleware/velcro-data';
+
+export default class VelcroModifier extends Modifier {
+  modify(
+    floatingElement,
+    [referenceElement],
+    {
+      strategy = 'fixed',
+      offsetOptions = 0,
+      placement = 'bottom',
+      flipOptions,
+      shiftOptions,
+      middleware = [],
+      setVelcroData,
+    }
+  ) {
+    if (typeof referenceElement === 'string') {
+      referenceElement = document.querySelector(referenceElement);
+    }
+
+    assert('no reference element defined', referenceElement instanceof HTMLElement);
+
+    assert('no floating element defined', floatingElement instanceof HTMLElement);
+
+    assert(
+      'reference and floating elements cannot be the same element',
+      floatingElement !== referenceElement
+    );
+
+    assert('@middleware must be an array of one or more objects', Array.isArray(middleware));
+
+    Object.assign(floatingElement.style, {
+      position: strategy,
+      top: '0',
+      left: '0',
+    });
+
+    let update = async () => {
+      let { x, y, middlewareData } = await computePosition(referenceElement, floatingElement, {
+        middleware: [
+          offset(offsetOptions),
+          flip(flipOptions),
+          shift(shiftOptions),
+          ...middleware,
+          hide({ strategy: 'referenceHidden' }),
+          hide({ strategy: 'escaped' }),
+          velcroData(),
+        ],
+        placement,
+        strategy,
+      });
+
+      Object.assign(floatingElement.style, {
+        strategy,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        visibility: middlewareData.hide.referenceHidden ? 'hidden' : 'visible',
+      });
+
+      setVelcroData?.(middlewareData.metadata);
+    };
+
+    let cleanup = autoUpdate(referenceElement, floatingElement, update);
+
+    registerDestructor(this, cleanup);
+  }
+}

package/app/components/velcro.js

@@ -0,0 +1 @@
+export { default } from 'ember-velcro/components/velcro';

package/app/modifiers/velcro.js

@@ -0,0 +1 @@
+export { default } from 'ember-velcro/modifiers/velcro';

package/commitlint.config.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+/**
+ * The goal of commitlint in this repo is not to enforce
+ * eerily similar commit messages across comitters, but
+ * to give juuust enough enformation for automated releasing.
+ *
+ * Beyond major/minor/patch indicators, most of the commit
+ * message's conventions are irrelevant, and should instead be
+ * focused on content / release notes.
+ *
+ * And for contributors to the repository, following convential commits
+ * is not needed. The maintainer of ember-headless-table merging a PR
+ * can specify chore/feat/fix/breaking in the merge commit in the GitHub
+ * UI.
+ */
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  // https://commitlint.js.org/#/reference-rules
+  // Level [0..2]: 0 disables the rule. For 1 it will be considered a warning for 2 an error.
+  // Applicable always|never: never inverts the rule.
+  // Value: value to use for this rule.
+  rules: {
+    // 72, the default, is a little short
+    'header-max-length': [1, 'always', 100],
+    // Let people use caps
+    'header-case': [0],
+    // Let people write  sentences
+    'header-full-stop': [0],
+    // Casing doesn't really matter
+    'subject-case': [0],
+  },
+};

package/config/environment.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function (/* environment, appConfig */) {
+  return {};
+};

package/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  name: require('./package').name,
+};

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "ember-velcro",
+  "version": "1.0.0",
+  "description": "Ember Velcro sticks one element to another with Floating UI.",
+  "keywords": [
+    "ember-addon"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://camskene@github.com/camskene/ember-velcro.git"
+  },
+  "license": "MIT",
+  "author": "Cam Skene",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "ember build --environment=production",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:hbs": "ember-template-lint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
+    "start": "ember serve",
+    "test": "npm-run-all lint test:*",
+    "test:ember": "ember test",
+    "test:ember-compatibility": "ember try:each"
+  },
+  "dependencies": {
+    "@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"
+  },
+  "devDependencies": {
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.8.1",
+    "@embroider/test-setup": "^1.8.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@nullvoxpopuli/eslint-configs": "^2.2.58",
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/git": "^10.0.0",
+    "babel-eslint": "^10.1.0",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-cli": "~4.7.0",
+    "ember-cli-dependency-checker": "^3.3.1",
+    "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-postcss": "^8.2.0",
+    "ember-cli-sri": "^2.1.1",
+    "ember-cli-terser": "^4.0.2",
+    "ember-disable-prototype-extensions": "^1.1.3",
+    "ember-functions-as-helper-polyfill": "^2.1.1",
+    "ember-load-initializers": "^2.1.2",
+    "ember-page-title": "^7.0.0",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^8.0.3",
+    "ember-source": "~4.7.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^4.10.1",
+    "ember-try": "^2.0.0",
+    "eslint": "^7.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-decorator-position": "^5.0.1",
+    "eslint-plugin-ember": "^11.0.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.1",
+    "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "qunit": "^2.19.1",
+    "qunit-console-grouper": "^0.3.0",
+    "qunit-dom": "^2.0.0",
+    "semantic-release": "^19.0.0",
+    "tailwindcss": "^3.1.8",
+    "webpack": "^5.74.0"
+  },
+  "engines": {
+    "node": "14.* || >= 16"
+  },
+  "ember": {
+    "edition": "octane"
+  },
+  "ember-addon": {
+    "configPath": "tests/dummy/config"
+  },
+  "release": {
+    "branches": [
+      "main",
+      "master"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      "@semantic-release/git"
+    ]
+  },
+  "main": "index.js",
+  "bugs": {
+    "url": "https://github.com/camskene/ember-velcro/issues"
+  },
+  "homepage": "https://github.com/camskene/ember-velcro#readme"
+}

package/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: ['./tests/**/app/**/*.hbs'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  ...(process.env.EMBER_ENV == 'development' && {
+    safelist: [{ pattern: /.*/ }],
+  }),
+};