ember-safe-button 4.0.1-beta.0 → 4.0.1

package/README.md

@@ -6,6 +6,8 @@ Provides a button for potentially dangerous actions that need confirmation. The
 first click unlocks the safety, the second confirms. If no confirmation is
 provided, the safety rolls back after a timeout.
 
+- Demo page: https://ember-safe-button.netlify.app
+
 ## Compatibility
 
 - Ember.js v5.8 or above
@@ -23,10 +25,7 @@ ember install ember-safe-button
 Minimal example:
 
 ```hbs
-<SafeButton
-  @message="delete"
-  @onConfirm={{this.safeButtonClicked}}
-/>
+<SafeButton @message="delete" @onConfirm={{this.safeButtonClicked}} />
 ```
 
 Which will produce:
@@ -53,8 +52,7 @@ See the [Contributing](CONTRIBUTING.md) guide for details.
 
 ## Contributors
 
-- [Michal Bryxí](https://twitter.com/MichalBryxi)
-- [Karel Funda](https://twitter.com/fundix2)
+- [Michal Bryxí](https://mastodon.world/deck/@MichalBryxi)
 
 ## License
 

package/dist/components/safe-button/index.js

@@ -11,7 +11,6 @@ import TriggerComponent from '../trigger/index.js';
 import { SAFETY_STATUS } from '../../states.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 const DEFAULT_TIMEOUT = 3000;
@@ -178,20 +177,6 @@ class SafeButtonComponent extends Component {
       this.safetyStatus = SAFETY_STATUS.LOCKING;
     }
   }), null, "triggerSafety", null);
-  triggerInstance = setComponentTemplate(precompileTemplate("<Trigger @onClick={{@onConfirm}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.trigger}} />", {
-    strictMode: true,
-    scope: () => ({
-      Trigger: TriggerComponent,
-      this: this
-    })
-  }), templateOnly());
-  safetyInstance = setComponentTemplate(precompileTemplate("<Safety @onClick={{this.onUnlocking}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.safety}} />", {
-    strictMode: true,
-    scope: () => ({
-      Safety: SafetyComponent,
-      this: this
-    })
-  }), templateOnly());
   static {
     setComponentTemplate(precompileTemplate("<div class=\"ember-safe-button\" ...attributes>\n  {{#if (has-block)}}\n    {{yield (hash trigger=(component Trigger onClick=@onConfirm safetyStatus=this.safetyStatus displayedMessage=this.displayedMessage webAnimations=this.webAnimations.trigger) safety=(component Safety onClick=this.onUnlocking safetyStatus=this.safetyStatus displayedMessage=this.displayedMessage webAnimations=this.webAnimations.safety))}}\n  {{else}}\n    <Trigger @onClick={{@onConfirm}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.trigger}} />\n    <Safety @onClick={{this.onUnlocking}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.safety}} />\n  {{/if}}\n</div>", {
       strictMode: true,

package/dist/components/safe-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/safe-button/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { action } from '@ember/object';\nimport { hash } from '@ember/helper';\n\nimport { timeout } from 'ember-concurrency';\nimport { task } from 'ember-concurrency';\n\nimport embeddedAnimations from './animations/index.js';\nimport Safety from '../safety/index.gjs';\nimport Trigger from '../trigger/index.gjs';\nimport { SAFETY_STATUS } from '../../states.js';\n\nconst DEFAULT_TIMEOUT = 3000;\nconst DEFAULT_ANIMATION = 'slide';\nconsole.log('DEBUG: ember-safe-button loaded');\n\n/**\n  Main component.\n\n  ```hbs\n    <SafeButton\n      class=\"border-black\"\n      @animation={{this.animation}}\n      @message=\"Delete me\"\n      @timeout={{2000}}\n      @onConfirm={{action safeButtonClicked}} />\n  ```\n\n  ```\n    @class SafeButtonComponent\n    @param {string} [class=\"ember-safe-button\"] CSS class to be applied on the wrapping element.\n    @param {object} [animation=\"slid\"] Definition of animation; It can either be string and point to one of the pre-defined animations; Or it can be an object describing Web Animation API\n    @param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.\n    @param {string} [message=\"delete\"] Text to be printed on the buttons in case block is not provided.\n    @param {function} onConfirm - Action to trigger whenever user clicks the trigger.\n  ```\n\n  When trying to construct your own `@animation` object you can take inspiration from the simple `slide` animation. The thing to keep in mind is that these go directly as parameters to [element.animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) and that there are in fact four animations of which always two fire at the same time:\n\n  - `safety.unlocking` and `trigger.unlocking`\n  - `safety.locking` and `trigger.locking`\n\n  ```js\n    {\n      safety: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(-100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(-100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n      trigger: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n    }\n  ```\n */\nexport default class SafeButtonComponent extends Component {\n  constructor() {\n    super(...arguments);\n\n    assert(\n      '@onConfirm attribute must be set',\n      typeof this.args.onConfirm === 'function',\n    );\n  }\n\n  @tracked safetyStatus = SAFETY_STATUS.LOCKED;\n\n  get activeAnimation() {\n    const animation = this.args.animation || DEFAULT_ANIMATION;\n\n    return typeof animation === 'string'\n      ? embeddedAnimations[animation]\n      : animation;\n  }\n\n  get webAnimations() {\n    const { activeAnimation, onUnlocked, onLocked } = this;\n\n    return {\n      safety: {\n        unlocking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.unlocking.keyframes,\n            activeAnimation.safety.unlocking.options,\n          );\n          animation.onfinish = onUnlocked;\n        },\n        locking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.locking.keyframes,\n            activeAnimation.safety.locking.options,\n          );\n          animation.onfinish = onLocked;\n        },\n      },\n      trigger: {\n        unlocking({ element }) {\n          element.animate(\n            activeAnimation.trigger.unlocking.keyframes,\n            activeAnimation.trigger.unlocking.options,\n          );\n        },\n        locking({ element }) {\n          element.animate(\n            activeAnimation.trigger.locking.keyframes,\n            activeAnimation.trigger.locking.options,\n          );\n        },\n      },\n    };\n  }\n\n  get timeout() {\n    return this.args.timeout || DEFAULT_TIMEOUT;\n  }\n\n  get displayedMessage() {\n    return this.args.message || 'delete';\n  }\n\n  @action\n  onUnlocking() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKING;\n  }\n\n  @action\n  onUnlocked() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKED;\n    this.triggerSafety.perform();\n  }\n\n  @action\n  onLocked() {\n    this.safetyStatus = SAFETY_STATUS.LOCKED;\n  }\n\n  triggerSafety = task(async () => {\n    await timeout(this.timeout);\n    this.safetyStatus = SAFETY_STATUS.LOCKING;\n  });\n\n  triggerInstance = <template>\n    <Trigger\n      @onClick={{@onConfirm}}\n      @safetyStatus={{this.safetyStatus}}\n      @displayedMessage={{this.displayedMessage}}\n      @webAnimations={{this.webAnimations.trigger}}\n    />\n  </template>;\n\n  safetyInstance = <template>\n    <Safety\n      @onClick={{this.onUnlocking}}\n      @safetyStatus={{this.safetyStatus}}\n      @displayedMessage={{this.displayedMessage}}\n      @webAnimations={{this.webAnimations.safety}}\n    />\n  </template>;\n\n  <template>\n    <div class=\"ember-safe-button\" ...attributes>\n      {{#if (has-block)}}\n        {{yield\n          (hash\n            trigger=(component\n              Trigger\n              onClick=@onConfirm\n              safetyStatus=this.safetyStatus\n              displayedMessage=this.displayedMessage\n              webAnimations=this.webAnimations.trigger\n            )\n            safety=(component\n              Safety\n              onClick=this.onUnlocking\n              safetyStatus=this.safetyStatus\n              displayedMessage=this.displayedMessage\n              webAnimations=this.webAnimations.safety\n            )\n          )\n        }}\n      {{else}}\n        <Trigger\n          @onClick={{@onConfirm}}\n          @safetyStatus={{this.safetyStatus}}\n          @displayedMessage={{this.displayedMessage}}\n          @webAnimations={{this.webAnimations.trigger}}\n        />\n        <Safety\n          @onClick={{this.onUnlocking}}\n          @safetyStatus={{this.safetyStatus}}\n          @displayedMessage={{this.displayedMessage}}\n          @webAnimations={{this.webAnimations.safety}}\n        />\n      {{/if}}\n    </div>\n  </template>\n}\n"],"names":["DEFAULT_TIMEOUT","DEFAULT_ANIMATION","console","log","SafeButtonComponent","Component","constructor","arguments","assert","args","onConfirm","g","prototype","tracked","SAFETY_STATUS","LOCKED","i","activeAnimation","animation","embeddedAnimations","webAnimations","onUnlocked","onLocked","safety","unlocking","element","animate","keyframes","options","onfinish","locking","trigger","timeout","displayedMessage","message","onUnlocking","safetyStatus","UNLOCKING","n","action","UNLOCKED","triggerSafety","perform","_buildTask","context","generator","LOCKING","triggerInstance","setComponentTemplate","precompileTemplate","strictMode","scope","Trigger","this","templateOnly","safetyInstance","Safety","hash"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/safe-button/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { action } from '@ember/object';\nimport { hash } from '@ember/helper';\n\nimport { timeout } from 'ember-concurrency';\nimport { task } from 'ember-concurrency';\n\nimport embeddedAnimations from './animations/index.js';\nimport Safety from '../safety/index.gjs';\nimport Trigger from '../trigger/index.gjs';\nimport { SAFETY_STATUS } from '../../states.js';\n\nconst DEFAULT_TIMEOUT = 3000;\nconst DEFAULT_ANIMATION = 'slide';\nconsole.log('DEBUG: ember-safe-button loaded');\n\n/**\n  Main component.\n\n  ```hbs\n    <SafeButton\n      class=\"border-black\"\n      @animation={{this.animation}}\n      @message=\"Delete me\"\n      @timeout={{2000}}\n      @onConfirm={{action safeButtonClicked}} />\n  ```\n\n  ```\n    @class SafeButtonComponent\n    @param {string} [class=\"ember-safe-button\"] CSS class to be applied on the wrapping element.\n    @param {object} [animation=\"slid\"] Definition of animation; It can either be string and point to one of the pre-defined animations; Or it can be an object describing Web Animation API\n    @param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.\n    @param {string} [message=\"delete\"] Text to be printed on the buttons in case block is not provided.\n    @param {function} onConfirm - Action to trigger whenever user clicks the trigger.\n  ```\n\n  When trying to construct your own `@animation` object you can take inspiration from the simple `slide` animation. The thing to keep in mind is that these go directly as parameters to [element.animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) and that there are in fact four animations of which always two fire at the same time:\n\n  - `safety.unlocking` and `trigger.unlocking`\n  - `safety.locking` and `trigger.locking`\n\n  ```js\n    {\n      safety: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(-100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(-100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n      trigger: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n    }\n  ```\n */\nexport default class SafeButtonComponent extends Component {\n  constructor() {\n    super(...arguments);\n\n    assert(\n      '@onConfirm attribute must be set',\n      typeof this.args.onConfirm === 'function',\n    );\n  }\n\n  @tracked safetyStatus = SAFETY_STATUS.LOCKED;\n\n  get activeAnimation() {\n    const animation = this.args.animation || DEFAULT_ANIMATION;\n\n    return typeof animation === 'string'\n      ? embeddedAnimations[animation]\n      : animation;\n  }\n\n  get webAnimations() {\n    const { activeAnimation, onUnlocked, onLocked } = this;\n\n    return {\n      safety: {\n        unlocking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.unlocking.keyframes,\n            activeAnimation.safety.unlocking.options,\n          );\n          animation.onfinish = onUnlocked;\n        },\n        locking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.locking.keyframes,\n            activeAnimation.safety.locking.options,\n          );\n          animation.onfinish = onLocked;\n        },\n      },\n      trigger: {\n        unlocking({ element }) {\n          element.animate(\n            activeAnimation.trigger.unlocking.keyframes,\n            activeAnimation.trigger.unlocking.options,\n          );\n        },\n        locking({ element }) {\n          element.animate(\n            activeAnimation.trigger.locking.keyframes,\n            activeAnimation.trigger.locking.options,\n          );\n        },\n      },\n    };\n  }\n\n  get timeout() {\n    return this.args.timeout || DEFAULT_TIMEOUT;\n  }\n\n  get displayedMessage() {\n    return this.args.message || 'delete';\n  }\n\n  @action\n  onUnlocking() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKING;\n  }\n\n  @action\n  onUnlocked() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKED;\n    this.triggerSafety.perform();\n  }\n\n  @action\n  onLocked() {\n    this.safetyStatus = SAFETY_STATUS.LOCKED;\n  }\n\n  triggerSafety = task(async () => {\n    await timeout(this.timeout);\n    this.safetyStatus = SAFETY_STATUS.LOCKING;\n  });\n\n  <template>\n    <div class=\"ember-safe-button\" ...attributes>\n      {{#if (has-block)}}\n        {{yield\n          (hash\n            trigger=(component\n              Trigger\n              onClick=@onConfirm\n              safetyStatus=this.safetyStatus\n              displayedMessage=this.displayedMessage\n              webAnimations=this.webAnimations.trigger\n            )\n            safety=(component\n              Safety\n              onClick=this.onUnlocking\n              safetyStatus=this.safetyStatus\n              displayedMessage=this.displayedMessage\n              webAnimations=this.webAnimations.safety\n            )\n          )\n        }}\n      {{else}}\n        <Trigger\n          @onClick={{@onConfirm}}\n          @safetyStatus={{this.safetyStatus}}\n          @displayedMessage={{this.displayedMessage}}\n          @webAnimations={{this.webAnimations.trigger}}\n        />\n        <Safety\n          @onClick={{this.onUnlocking}}\n          @safetyStatus={{this.safetyStatus}}\n          @displayedMessage={{this.displayedMessage}}\n          @webAnimations={{this.webAnimations.safety}}\n        />\n      {{/if}}\n    </div>\n  </template>\n}\n"],"names":["DEFAULT_TIMEOUT","DEFAULT_ANIMATION","console","log","SafeButtonComponent","Component","constructor","arguments","assert","args","onConfirm","g","prototype","tracked","SAFETY_STATUS","LOCKED","i","activeAnimation","animation","embeddedAnimations","webAnimations","onUnlocked","onLocked","safety","unlocking","element","animate","keyframes","options","onfinish","locking","trigger","timeout","displayedMessage","message","onUnlocking","safetyStatus","UNLOCKING","n","action","UNLOCKED","triggerSafety","perform","_buildTask","context","generator","LOCKING","setComponentTemplate","precompileTemplate","strictMode","scope","hash","Trigger","Safety"],"mappings":"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"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ember-safe-button",
-  "version": "4.0.1-beta.0",
+  "version": "4.0.1",
   "description": "For potentially dangerous actions that better needs a confirmation.",
   "keywords": [
     "ember-addon"
   ],
-  "repository": "https://gitlab.com/michal-bryxi/open-source/ember-safe-button",
+  "repository": "https://gitlab.com/michal-bryxi-oss/ember-safe-button",
   "license": "MIT",
   "author": "",
   "imports": {

package/src/components/safe-button/index.gjs

@@ -181,24 +181,6 @@ export default class SafeButtonComponent extends Component {
     this.safetyStatus = SAFETY_STATUS.LOCKING;
   });
 
-  triggerInstance = <template>
-    <Trigger
-      @onClick={{@onConfirm}}
-      @safetyStatus={{this.safetyStatus}}
-      @displayedMessage={{this.displayedMessage}}
-      @webAnimations={{this.webAnimations.trigger}}
-    />
-  </template>;
-
-  safetyInstance = <template>
-    <Safety
-      @onClick={{this.onUnlocking}}
-      @safetyStatus={{this.safetyStatus}}
-      @displayedMessage={{this.displayedMessage}}
-      @webAnimations={{this.webAnimations.safety}}
-    />
-  </template>;
-
   <template>
     <div class="ember-safe-button" ...attributes>
       {{#if (has-block)}}