ember-safe-button 3.2.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/README.md +26 -25
- package/addon-main.cjs +0 -2
- package/dist/components/safe-button/animations/index.js.map +1 -1
- package/dist/components/safe-button/index.js +207 -9
- package/dist/components/safe-button/index.js.map +1 -1
- package/dist/components/safety/index.js +13 -9
- package/dist/components/safety/index.js.map +1 -1
- package/dist/components/trigger/index.js +13 -9
- package/dist/components/trigger/index.js.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/modifiers/animate-me.js +1 -1
- package/dist/modifiers/animate-me.js.map +1 -1
- package/dist/states.js +9 -0
- package/dist/states.js.map +1 -0
- package/package.json +75 -53
- package/src/components/safe-button/animations/flip.js +114 -0
- package/src/components/safe-button/animations/index.js +15 -0
- package/src/components/safe-button/animations/lift-bars.js +50 -0
- package/src/components/safe-button/animations/poing.js +99 -0
- package/src/components/safe-button/animations/roll.js +50 -0
- package/src/components/safe-button/animations/slide.js +50 -0
- package/src/components/safe-button/animations/zoom.js +52 -0
- package/src/components/safe-button/index.gjs +239 -0
- package/src/components/safety/index.gjs +67 -0
- package/src/components/trigger/index.gjs +57 -0
- package/src/index.js +3 -0
- package/src/modifiers/animate-me.js +22 -0
- package/src/states.js +6 -0
- package/dist/index-BZOIdnQv.js +0 -220
- package/dist/index-BZOIdnQv.js.map +0 -1
package/LICENSE.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
The MIT License (MIT)
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2025
|
|
4
4
|
|
|
5
5
|
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:
|
|
6
6
|
|
package/README.md
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-

|
|
2
2
|
|
|
3
3
|
# ember-safe-button
|
|
4
4
|
|
|
5
|
-
Provides a button for potentially dangerous actions that
|
|
5
|
+
Provides a button for potentially dangerous actions that need confirmation. The
|
|
6
|
+
first click unlocks the safety, the second confirms. If no confirmation is
|
|
7
|
+
provided, the safety rolls back after a timeout.
|
|
6
8
|
|
|
9
|
+
- Demo page: https://ember-safe-button.netlify.app
|
|
7
10
|
|
|
8
|
-
Compatibility
|
|
9
|
-
------------------------------------------------------------------------------
|
|
10
|
-
|
|
11
|
-
* Ember.js v3.20 or above
|
|
12
|
-
* Ember CLI v3.20 or above
|
|
13
|
-
* Node.js v12 or above
|
|
11
|
+
## Compatibility
|
|
14
12
|
|
|
13
|
+
- Ember.js v5.8 or above
|
|
14
|
+
- Embroider or ember-auto-import v2
|
|
15
|
+
- Node.js v20.19+ for local development/builds
|
|
15
16
|
|
|
16
17
|
## Installation
|
|
17
18
|
|
|
@@ -19,40 +20,39 @@ Compatibility
|
|
|
19
20
|
ember install ember-safe-button
|
|
20
21
|
```
|
|
21
22
|
|
|
22
|
-
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
25
|
Minimal example:
|
|
26
26
|
|
|
27
27
|
```hbs
|
|
28
|
-
<SafeButton
|
|
29
|
-
@message="delete"
|
|
30
|
-
@onConfirm={{this.safeButtonClicked}}
|
|
31
|
-
/>
|
|
28
|
+
<SafeButton @message="delete" @onConfirm={{this.safeButtonClicked}} />
|
|
32
29
|
```
|
|
33
30
|
|
|
34
31
|
Which will produce:
|
|
35
32
|
|
|
36
|
-

|
|
37
34
|
|
|
38
35
|
## Documentation
|
|
39
36
|
|
|
40
|
-
|
|
37
|
+
Run the demo app locally:
|
|
41
38
|
|
|
42
|
-
|
|
39
|
+
```
|
|
40
|
+
pnpm start
|
|
41
|
+
```
|
|
43
42
|
|
|
44
|
-
|
|
43
|
+
Build the demo app for static hosting:
|
|
45
44
|
|
|
46
|
-
|
|
45
|
+
```
|
|
46
|
+
pnpm demo:build
|
|
47
|
+
```
|
|
47
48
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
## Contributing
|
|
50
|
+
|
|
51
|
+
See the [Contributing](CONTRIBUTING.md) guide for details.
|
|
51
52
|
|
|
52
53
|
## Contributors
|
|
53
54
|
|
|
54
|
-
- [Michal Bryxí](https://
|
|
55
|
-
- [Karel Funda](https://twitter.com/fundix2)
|
|
55
|
+
- [Michal Bryxí](https://mastodon.world/deck/@MichalBryxi)
|
|
56
56
|
|
|
57
57
|
## License
|
|
58
58
|
|
|
@@ -60,5 +60,6 @@ This project is licensed under the [MIT License](LICENSE.md).
|
|
|
60
60
|
|
|
61
61
|
## Attribution
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
Icons made by [DinosoftLabs](https://www.flaticon.com/authors/dinosoftlabs) and
|
|
64
|
+
[surang](https://www.flaticon.com/authors/surang) from
|
|
65
|
+
[Flaticon](https://www.flaticon.com/).
|
package/addon-main.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/safe-button/animations/index.js"],"sourcesContent":["import poing from './poing';\nimport slide from './slide';\nimport roll from './roll';\nimport flip from './flip';\nimport liftBars from './lift-bars';\nimport zoom from './zoom';\n\nexport default {\n poing,\n slide,\n flip,\n zoom,\n roll,\n 'lift-bars': liftBars,\n};\n"],"names":["poing","slide","flip","zoom","roll","liftBars"],"mappings":";;;;;;;AAOA,yBAAe;EACbA,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,IAAI;AACJ,EAAA,WAAW,EAAEC;AACf,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/safe-button/animations/index.js"],"sourcesContent":["import poing from './poing.js';\nimport slide from './slide.js';\nimport roll from './roll.js';\nimport flip from './flip.js';\nimport liftBars from './lift-bars.js';\nimport zoom from './zoom.js';\n\nexport default {\n poing,\n slide,\n flip,\n zoom,\n roll,\n 'lift-bars': liftBars,\n};\n"],"names":["poing","slide","flip","zoom","roll","liftBars"],"mappings":";;;;;;;AAOA,yBAAe;EACbA,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,IAAI;AACJ,EAAA,WAAW,EAAEC;AACf,CAAC;;;;"}
|
|
@@ -1,10 +1,208 @@
|
|
|
1
|
-
|
|
2
|
-
import '
|
|
3
|
-
import '@glimmer/
|
|
4
|
-
import '@
|
|
5
|
-
import '@ember/
|
|
6
|
-
import '@ember/
|
|
7
|
-
import 'ember-concurrency';
|
|
8
|
-
import './animations/index.js';
|
|
9
|
-
import '
|
|
1
|
+
import { buildTask } from 'ember-concurrency/async-arrow-runtime';
|
|
2
|
+
import Component from '@glimmer/component';
|
|
3
|
+
import { tracked } from '@glimmer/tracking';
|
|
4
|
+
import { assert } from '@ember/debug';
|
|
5
|
+
import { action } from '@ember/object';
|
|
6
|
+
import { hash } from '@ember/helper';
|
|
7
|
+
import { timeout } from 'ember-concurrency';
|
|
8
|
+
import embeddedAnimations from './animations/index.js';
|
|
9
|
+
import SafetyComponent from '../safety/index.js';
|
|
10
|
+
import TriggerComponent from '../trigger/index.js';
|
|
11
|
+
import { SAFETY_STATUS } from '../../states.js';
|
|
12
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
13
|
+
import { setComponentTemplate } from '@ember/component';
|
|
14
|
+
import templateOnly from '@ember/component/template-only';
|
|
15
|
+
import { g, i, n } from 'decorator-transforms/runtime-esm';
|
|
16
|
+
|
|
17
|
+
const DEFAULT_TIMEOUT = 3000;
|
|
18
|
+
const DEFAULT_ANIMATION = 'slide';
|
|
19
|
+
console.log('DEBUG: ember-safe-button loaded');
|
|
20
|
+
/**
|
|
21
|
+
Main component.
|
|
22
|
+
|
|
23
|
+
```hbs
|
|
24
|
+
<SafeButton
|
|
25
|
+
class="border-black"
|
|
26
|
+
@animation={{this.animation}}
|
|
27
|
+
@message="Delete me"
|
|
28
|
+
@timeout={{2000}}
|
|
29
|
+
@onConfirm={{action safeButtonClicked}} />
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
@class SafeButtonComponent
|
|
34
|
+
@param {string} [class="ember-safe-button"] CSS class to be applied on the wrapping element.
|
|
35
|
+
@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
|
|
36
|
+
@param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.
|
|
37
|
+
@param {string} [message="delete"] Text to be printed on the buttons in case block is not provided.
|
|
38
|
+
@param {function} onConfirm - Action to trigger whenever user clicks the trigger.
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
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:
|
|
42
|
+
|
|
43
|
+
- `safety.unlocking` and `trigger.unlocking`
|
|
44
|
+
- `safety.locking` and `trigger.locking`
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
{
|
|
48
|
+
safety: {
|
|
49
|
+
unlocking: {
|
|
50
|
+
keyframes: [
|
|
51
|
+
{ transform: 'translateX(0)' },
|
|
52
|
+
{ transform: 'translateX(-100%)' },
|
|
53
|
+
],
|
|
54
|
+
options: {
|
|
55
|
+
duration: 1000,
|
|
56
|
+
fill: 'both',
|
|
57
|
+
easing: 'ease',
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
locking: {
|
|
61
|
+
keyframes: [
|
|
62
|
+
{ transform: 'translateX(-100%)' },
|
|
63
|
+
{ transform: 'translateX(0)' },
|
|
64
|
+
],
|
|
65
|
+
options: {
|
|
66
|
+
duration: 1000,
|
|
67
|
+
fill: 'both',
|
|
68
|
+
easing: 'ease',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
trigger: {
|
|
73
|
+
unlocking: {
|
|
74
|
+
keyframes: [
|
|
75
|
+
{ transform: 'translateX(100%)' },
|
|
76
|
+
{ transform: 'translateX(0)' },
|
|
77
|
+
],
|
|
78
|
+
options: {
|
|
79
|
+
duration: 1000,
|
|
80
|
+
fill: 'both',
|
|
81
|
+
easing: 'ease',
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
locking: {
|
|
85
|
+
keyframes: [
|
|
86
|
+
{ transform: 'translateX(0)' },
|
|
87
|
+
{ transform: 'translateX(100%)' },
|
|
88
|
+
],
|
|
89
|
+
options: {
|
|
90
|
+
duration: 1000,
|
|
91
|
+
fill: 'both',
|
|
92
|
+
easing: 'ease',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
*/
|
|
99
|
+
class SafeButtonComponent extends Component {
|
|
100
|
+
constructor() {
|
|
101
|
+
super(...arguments);
|
|
102
|
+
assert('@onConfirm attribute must be set', typeof this.args.onConfirm === 'function');
|
|
103
|
+
}
|
|
104
|
+
static {
|
|
105
|
+
g(this.prototype, "safetyStatus", [tracked], function () {
|
|
106
|
+
return SAFETY_STATUS.LOCKED;
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
#safetyStatus = (i(this, "safetyStatus"), void 0);
|
|
110
|
+
get activeAnimation() {
|
|
111
|
+
const animation = this.args.animation || DEFAULT_ANIMATION;
|
|
112
|
+
return typeof animation === 'string' ? embeddedAnimations[animation] : animation;
|
|
113
|
+
}
|
|
114
|
+
get webAnimations() {
|
|
115
|
+
const {
|
|
116
|
+
activeAnimation,
|
|
117
|
+
onUnlocked,
|
|
118
|
+
onLocked
|
|
119
|
+
} = this;
|
|
120
|
+
return {
|
|
121
|
+
safety: {
|
|
122
|
+
unlocking: ({
|
|
123
|
+
element
|
|
124
|
+
}) => {
|
|
125
|
+
let animation = element.animate(activeAnimation.safety.unlocking.keyframes, activeAnimation.safety.unlocking.options);
|
|
126
|
+
animation.onfinish = onUnlocked;
|
|
127
|
+
},
|
|
128
|
+
locking: ({
|
|
129
|
+
element
|
|
130
|
+
}) => {
|
|
131
|
+
let animation = element.animate(activeAnimation.safety.locking.keyframes, activeAnimation.safety.locking.options);
|
|
132
|
+
animation.onfinish = onLocked;
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
trigger: {
|
|
136
|
+
unlocking({
|
|
137
|
+
element
|
|
138
|
+
}) {
|
|
139
|
+
element.animate(activeAnimation.trigger.unlocking.keyframes, activeAnimation.trigger.unlocking.options);
|
|
140
|
+
},
|
|
141
|
+
locking({
|
|
142
|
+
element
|
|
143
|
+
}) {
|
|
144
|
+
element.animate(activeAnimation.trigger.locking.keyframes, activeAnimation.trigger.locking.options);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
get timeout() {
|
|
150
|
+
return this.args.timeout || DEFAULT_TIMEOUT;
|
|
151
|
+
}
|
|
152
|
+
get displayedMessage() {
|
|
153
|
+
return this.args.message || 'delete';
|
|
154
|
+
}
|
|
155
|
+
onUnlocking() {
|
|
156
|
+
this.safetyStatus = SAFETY_STATUS.UNLOCKING;
|
|
157
|
+
}
|
|
158
|
+
static {
|
|
159
|
+
n(this.prototype, "onUnlocking", [action]);
|
|
160
|
+
}
|
|
161
|
+
onUnlocked() {
|
|
162
|
+
this.safetyStatus = SAFETY_STATUS.UNLOCKED;
|
|
163
|
+
this.triggerSafety.perform();
|
|
164
|
+
}
|
|
165
|
+
static {
|
|
166
|
+
n(this.prototype, "onUnlocked", [action]);
|
|
167
|
+
}
|
|
168
|
+
onLocked() {
|
|
169
|
+
this.safetyStatus = SAFETY_STATUS.LOCKED;
|
|
170
|
+
}
|
|
171
|
+
static {
|
|
172
|
+
n(this.prototype, "onLocked", [action]);
|
|
173
|
+
}
|
|
174
|
+
triggerSafety = buildTask(() => ({
|
|
175
|
+
context: this,
|
|
176
|
+
generator: function* () {
|
|
177
|
+
yield timeout(this.timeout);
|
|
178
|
+
this.safetyStatus = SAFETY_STATUS.LOCKING;
|
|
179
|
+
}
|
|
180
|
+
}), null, "triggerSafety", null);
|
|
181
|
+
triggerInstance = setComponentTemplate(precompileTemplate("<Trigger @onClick={{@onConfirm}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.trigger}} />", {
|
|
182
|
+
strictMode: true,
|
|
183
|
+
scope: () => ({
|
|
184
|
+
Trigger: TriggerComponent,
|
|
185
|
+
this: this
|
|
186
|
+
})
|
|
187
|
+
}), templateOnly());
|
|
188
|
+
safetyInstance = setComponentTemplate(precompileTemplate("<Safety @onClick={{this.onUnlocking}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.safety}} />", {
|
|
189
|
+
strictMode: true,
|
|
190
|
+
scope: () => ({
|
|
191
|
+
Safety: SafetyComponent,
|
|
192
|
+
this: this
|
|
193
|
+
})
|
|
194
|
+
}), templateOnly());
|
|
195
|
+
static {
|
|
196
|
+
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>", {
|
|
197
|
+
strictMode: true,
|
|
198
|
+
scope: () => ({
|
|
199
|
+
hash,
|
|
200
|
+
Trigger: TriggerComponent,
|
|
201
|
+
Safety: SafetyComponent
|
|
202
|
+
})
|
|
203
|
+
}), this);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
export { SafeButtonComponent as default };
|
|
10
208
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
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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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { _ as _defineProperty, S as SAFETY_STATUS } from '../../index-BZOIdnQv.js';
|
|
2
1
|
import Component from '@glimmer/component';
|
|
2
|
+
import { on } from '@ember/modifier';
|
|
3
|
+
import animateMe from '../../modifiers/animate-me.js';
|
|
4
|
+
import { SAFETY_STATUS } from '../../states.js';
|
|
3
5
|
import { precompileTemplate } from '@ember/template-compilation';
|
|
4
6
|
import { setComponentTemplate } from '@ember/component';
|
|
5
7
|
|
|
6
|
-
var TEMPLATE = precompileTemplate("<button\n class={{this.BASIC_CLASS}}\n disabled={{this.isDisabled}}\n aria-label={{this.ariaLabel}}\n type=\'button\'\n tabindex={{if this.isDisabled \'-1\' \'0\'}}\n ...attributes\n {{on \'click\' @onClick}}\n {{animate-me\n safetyStatus=@safetyStatus\n webAnimations=@webAnimations\n focusMe=this.focusMe\n }}\n>\n {{#if (has-block)}}\n {{yield}}\n {{else}}\n {{@displayedMessage}}\n {{/if}}\n</button>");
|
|
7
|
-
|
|
8
8
|
const BASIC_CLASS = 'ember-safe-button-safety';
|
|
9
9
|
const ARIA_LABELS = {
|
|
10
10
|
[SAFETY_STATUS.LOCKED]: 'Deactivate safety',
|
|
@@ -12,7 +12,6 @@ const ARIA_LABELS = {
|
|
|
12
12
|
[SAFETY_STATUS.UNLOCKED]: 'Safety not active',
|
|
13
13
|
[SAFETY_STATUS.LOCKING]: 'Activating safety'
|
|
14
14
|
};
|
|
15
|
-
|
|
16
15
|
/**
|
|
17
16
|
Safety is a component that covers the trigger.
|
|
18
17
|
|
|
@@ -29,10 +28,7 @@ const ARIA_LABELS = {
|
|
|
29
28
|
@class SafetyComponent
|
|
30
29
|
*/
|
|
31
30
|
class SafetyComponent extends Component {
|
|
32
|
-
|
|
33
|
-
super(...args);
|
|
34
|
-
_defineProperty(this, "BASIC_CLASS", BASIC_CLASS);
|
|
35
|
-
}
|
|
31
|
+
BASIC_CLASS = BASIC_CLASS;
|
|
36
32
|
get isDisabled() {
|
|
37
33
|
return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;
|
|
38
34
|
}
|
|
@@ -42,8 +38,16 @@ class SafetyComponent extends Component {
|
|
|
42
38
|
get ariaLabel() {
|
|
43
39
|
return ARIA_LABELS[this.args.safetyStatus];
|
|
44
40
|
}
|
|
41
|
+
static {
|
|
42
|
+
setComponentTemplate(precompileTemplate("<button class={{this.BASIC_CLASS}} disabled={{this.isDisabled}} aria-label={{this.ariaLabel}} type=\"button\" tabindex={{if this.isDisabled \"-1\" \"0\"}} ...attributes {{on \"click\" @onClick}} {{animateMe safetyStatus=@safetyStatus webAnimations=@webAnimations focusMe=this.focusMe}}>\n {{#if (has-block)}}\n {{yield}}\n {{else}}\n {{@displayedMessage}}\n {{/if}}\n</button>", {
|
|
43
|
+
strictMode: true,
|
|
44
|
+
scope: () => ({
|
|
45
|
+
on,
|
|
46
|
+
animateMe
|
|
47
|
+
})
|
|
48
|
+
}), this);
|
|
49
|
+
}
|
|
45
50
|
}
|
|
46
|
-
setComponentTemplate(TEMPLATE, SafetyComponent);
|
|
47
51
|
|
|
48
52
|
export { ARIA_LABELS, BASIC_CLASS, SafetyComponent as default };
|
|
49
53
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/safety/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/safety/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { on } from '@ember/modifier';\nimport animateMe from '../../modifiers/animate-me.js';\nimport { SAFETY_STATUS } from '../../states.js';\n\nexport const BASIC_CLASS = 'ember-safe-button-safety';\nexport const ARIA_LABELS = {\n [SAFETY_STATUS.LOCKED]: 'Deactivate safety',\n [SAFETY_STATUS.UNLOCKING]: 'Deactivating safety',\n [SAFETY_STATUS.UNLOCKED]: 'Safety not active',\n [SAFETY_STATUS.LOCKING]: 'Activating safety',\n};\n\n/**\n Safety is a component that covers the trigger.\n\n ```hbs\n <SafeButton\n @onConfirm={{action safeButtonClicked}} as |button|\n >\n <button.safety class=\"bg-grey-light\">\n This is safety\n </button.safety>\n </SafeButton>\n ```\n\n @class SafetyComponent\n */\nexport default class SafetyComponent extends Component {\n BASIC_CLASS = BASIC_CLASS;\n\n get isDisabled() {\n return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;\n }\n\n get focusMe() {\n return !this.isDisabled;\n }\n\n get ariaLabel() {\n return ARIA_LABELS[this.args.safetyStatus];\n }\n\n <template>\n <button\n class={{this.BASIC_CLASS}}\n disabled={{this.isDisabled}}\n aria-label={{this.ariaLabel}}\n type=\"button\"\n tabindex={{if this.isDisabled \"-1\" \"0\"}}\n ...attributes\n {{on \"click\" @onClick}}\n {{animateMe\n safetyStatus=@safetyStatus\n webAnimations=@webAnimations\n focusMe=this.focusMe\n }}\n >\n {{#if (has-block)}}\n {{yield}}\n {{else}}\n {{@displayedMessage}}\n {{/if}}\n </button>\n </template>\n}\n"],"names":["BASIC_CLASS","ARIA_LABELS","SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING","SafetyComponent","Component","isDisabled","args","safetyStatus","focusMe","ariaLabel","setComponentTemplate","precompileTemplate","strictMode","scope","on","animateMe"],"mappings":";;;;;;;AAMO,MAAMA,cAAc;AACpB,MAAMC,WAAA,GAAc;AACzB,EAAA,CAACC,aAAA,CAAcC,MAAM,GAAG,mBAAA;AACxB,EAAA,CAACD,aAAA,CAAcE,SAAS,GAAG,qBAAA;AAC3B,EAAA,CAACF,aAAA,CAAcG,QAAQ,GAAG,mBAAA;EAC1B,CAACH,aAAA,CAAcI,OAAO,GAAG;AAC3B;AAEA;;;;;;;;;;;;;;;AAee,MAAMC,eAAA,SAAwBC,SAAA,CAAA;AAC3CR,EAAAA,WAAA,GAAcA,WAAA;EAEd,IAAIS,UAAAA,GAAa;IACf,OAAO,IAAI,CAACC,IAAI,CAACC,YAAY,KAAKT,cAAcG,QAAQ;AAC1D,EAAA;EAEA,IAAIO,OAAAA,GAAU;IACZ,OAAO,CAAC,IAAI,CAACH,UAAU;AACzB,EAAA;EAEA,IAAII,SAAAA,GAAY;AACd,IAAA,OAAOZ,WAAW,CAAC,IAAI,CAACS,IAAI,CAACC,YAAY,CAAC;AAC5C,EAAA;AAEA,EAAA;IAAAG,oBAAA,CAAAC,kBAAA,CAAA,mYAAA,EAqBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { _ as _defineProperty, S as SAFETY_STATUS } from '../../index-BZOIdnQv.js';
|
|
2
1
|
import Component from '@glimmer/component';
|
|
2
|
+
import { on } from '@ember/modifier';
|
|
3
|
+
import animateMe from '../../modifiers/animate-me.js';
|
|
4
|
+
import { SAFETY_STATUS } from '../../states.js';
|
|
3
5
|
import { precompileTemplate } from '@ember/template-compilation';
|
|
4
6
|
import { setComponentTemplate } from '@ember/component';
|
|
5
7
|
|
|
6
|
-
var TEMPLATE = precompileTemplate("<button\n class={{this.BASIC_CLASS}}\n disabled={{this.isDisabled}}\n aria-label=\'Confirm action\'\n type=\'button\'\n tabindex={{if this.isDisabled \'-1\' \'0\'}}\n ...attributes\n {{on \'click\' @onClick}}\n {{animate-me\n safetyStatus=@safetyStatus\n webAnimations=@webAnimations\n focusMe=this.focusMe\n }}\n>\n {{#if (has-block)}}\n {{yield}}\n {{else}}\n {{@displayedMessage}}\n {{/if}}\n</button>");
|
|
7
|
-
|
|
8
8
|
const BASIC_CLASS = 'ember-safe-button-trigger';
|
|
9
|
-
|
|
10
9
|
/**
|
|
11
10
|
Trigger is a component that is by default covered by safety and triggers the action passed to <SafeButton> when clicked.
|
|
12
11
|
|
|
@@ -23,18 +22,23 @@ const BASIC_CLASS = 'ember-safe-button-trigger';
|
|
|
23
22
|
@class SafetyComponent
|
|
24
23
|
*/
|
|
25
24
|
class TriggerComponent extends Component {
|
|
26
|
-
|
|
27
|
-
super(...args);
|
|
28
|
-
_defineProperty(this, "BASIC_CLASS", BASIC_CLASS);
|
|
29
|
-
}
|
|
25
|
+
BASIC_CLASS = BASIC_CLASS;
|
|
30
26
|
get isDisabled() {
|
|
31
27
|
return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;
|
|
32
28
|
}
|
|
33
29
|
get focusMe() {
|
|
34
30
|
return !this.isDisabled;
|
|
35
31
|
}
|
|
32
|
+
static {
|
|
33
|
+
setComponentTemplate(precompileTemplate("<button class={{this.BASIC_CLASS}} disabled={{this.isDisabled}} aria-label=\"Confirm action\" type=\"button\" tabindex={{if this.isDisabled \"-1\" \"0\"}} ...attributes {{on \"click\" @onClick}} {{animateMe safetyStatus=@safetyStatus webAnimations=@webAnimations focusMe=this.focusMe}}>\n {{#if (has-block)}}\n {{yield}}\n {{else}}\n {{@displayedMessage}}\n {{/if}}\n</button>", {
|
|
34
|
+
strictMode: true,
|
|
35
|
+
scope: () => ({
|
|
36
|
+
on,
|
|
37
|
+
animateMe
|
|
38
|
+
})
|
|
39
|
+
}), this);
|
|
40
|
+
}
|
|
36
41
|
}
|
|
37
|
-
setComponentTemplate(TEMPLATE, TriggerComponent);
|
|
38
42
|
|
|
39
43
|
export { BASIC_CLASS, TriggerComponent as default };
|
|
40
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/trigger/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/trigger/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport animateMe from '../../modifiers/animate-me.js';\n\nimport { SAFETY_STATUS } from '../../states.js';\n\nexport const BASIC_CLASS = 'ember-safe-button-trigger';\n\n/**\n Trigger is a component that is by default covered by safety and triggers the action passed to <SafeButton> when clicked.\n\n ```hbs\n <SafeButton\n @onConfirm={{action safeButtonClicked}} as |button|\n >\n <button.trigger class=\"bg-red-dark\">\n Trigger\n </button.trigger>\n </SafeButton>\n ```\n\n @class SafetyComponent\n */\nexport default class TriggerComponent extends Component {\n BASIC_CLASS = BASIC_CLASS;\n\n get isDisabled() {\n return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;\n }\n\n get focusMe() {\n return !this.isDisabled;\n }\n\n <template>\n <button\n class={{this.BASIC_CLASS}}\n disabled={{this.isDisabled}}\n aria-label=\"Confirm action\"\n type=\"button\"\n tabindex={{if this.isDisabled \"-1\" \"0\"}}\n ...attributes\n {{on \"click\" @onClick}}\n {{animateMe\n safetyStatus=@safetyStatus\n webAnimations=@webAnimations\n focusMe=this.focusMe\n }}\n >\n {{#if (has-block)}}\n {{yield}}\n {{else}}\n {{@displayedMessage}}\n {{/if}}\n </button>\n </template>\n}\n"],"names":["BASIC_CLASS","TriggerComponent","Component","isDisabled","args","safetyStatus","SAFETY_STATUS","UNLOCKED","focusMe","setComponentTemplate","precompileTemplate","strictMode","scope","on","animateMe"],"mappings":";;;;;;;AAMO,MAAMA,cAAc;AAE3B;;;;;;;;;;;;;;;AAee,MAAMC,gBAAA,SAAyBC,SAAA,CAAA;AAC5CF,EAAAA,WAAA,GAAcA,WAAA;EAEd,IAAIG,UAAAA,GAAa;IACf,OAAO,IAAI,CAACC,IAAI,CAACC,YAAY,KAAKC,cAAcC,QAAQ;AAC1D,EAAA;EAEA,IAAIC,OAAAA,GAAU;IACZ,OAAO,CAAC,IAAI,CAACL,UAAU;AACzB,EAAA;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAAA,mYAAA,EAqBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate-me.js","sources":["../../src/modifiers/animate-me.js"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nimport { SAFETY_STATUS } from '../
|
|
1
|
+
{"version":3,"file":"animate-me.js","sources":["../../src/modifiers/animate-me.js"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nimport { SAFETY_STATUS } from '../states.js';\n\nexport default modifier(\n (element, _, named) => {\n if (named.focusMe) {\n element.focus();\n }\n\n if (named.safetyStatus === SAFETY_STATUS.UNLOCKING) {\n named.webAnimations.unlocking({\n element,\n });\n } else if (named.safetyStatus === SAFETY_STATUS.LOCKING) {\n named.webAnimations.locking({\n element,\n });\n }\n },\n { eager: false },\n);\n"],"names":["modifier","element","_","named","focusMe","focus","safetyStatus","SAFETY_STATUS","UNLOCKING","webAnimations","unlocking","LOCKING","locking","eager"],"mappings":";;;AAIA,gBAAeA,QAAQ,CACrB,CAACC,OAAO,EAAEC,CAAC,EAAEC,KAAK,KAAK;EACrB,IAAIA,KAAK,CAACC,OAAO,EAAE;IACjBH,OAAO,CAACI,KAAK,EAAE;AACjB,EAAA;AAEA,EAAA,IAAIF,KAAK,CAACG,YAAY,KAAKC,aAAa,CAACC,SAAS,EAAE;AAClDL,IAAAA,KAAK,CAACM,aAAa,CAACC,SAAS,CAAC;AAC5BT,MAAAA;AACF,KAAC,CAAC;EACJ,CAAC,MAAM,IAAIE,KAAK,CAACG,YAAY,KAAKC,aAAa,CAACI,OAAO,EAAE;AACvDR,IAAAA,KAAK,CAACM,aAAa,CAACG,OAAO,CAAC;AAC1BX,MAAAA;AACF,KAAC,CAAC;AACJ,EAAA;AACF,CAAC,EACD;AAAEY,EAAAA,KAAK,EAAE;AAAM,CACjB,CAAC;;;;"}
|
package/dist/states.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"states.js","sources":["../src/states.js"],"sourcesContent":["export const SAFETY_STATUS = {\n LOCKED: 1,\n UNLOCKING: 2,\n UNLOCKED: 3,\n LOCKING: 4,\n};\n"],"names":["SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING"],"mappings":"AAAO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,SAAS,EAAE,CAAC;AACZC,EAAAA,QAAQ,EAAE,CAAC;AACXC,EAAAA,OAAO,EAAE;AACX;;;;"}
|