ember-safe-button 3.2.0 → 4.0.0

package/package.json

@@ -1,64 +1,90 @@
 {
   "name": "ember-safe-button",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "For potentially dangerous actions that better needs a confirmation.",
+  "keywords": [
+    "ember-addon"
+  ],
   "repository": "https://gitlab.com/michal-bryxi/open-source/ember-safe-button",
   "license": "MIT",
   "author": "",
+  "imports": {
+    "#src/*": "./src/*"
+  },
   "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*",
-    "./addon-main.js": "./addon-main.js"
+    ".": {
+      "default": "./dist/index.js"
+    },
+    "./addon-main.js": "./addon-main.cjs",
+    "./*.css": "./dist/*.css",
+    "./*": {
+      "default": "./dist/*.js"
+    }
   },
   "files": [
-    "dist",
     "addon-main.cjs",
-    "CHANGELOG.md",
-    "README.md"
+    "declarations",
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@ember/render-modifiers": "2.1.0",
-    "@embroider/addon-shim": "1.10.2",
-    "ember-cli-htmlbars": "^6.2.0",
+    "@ember/render-modifiers": "3.0.0",
+    "@embroider/addon-shim": "^1.10.2",
+    "decorator-transforms": "^2.2.2",
     "ember-concurrency": "5.1.0",
-    "ember-modifier": "4.1.0"
+    "ember-modifier": "4.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.23.2",
-    "@babel/plugin-syntax-decorators": "7.22.10",
-    "@embroider/addon-dev": "8.1.2",
-    "@nullvoxpopuli/eslint-configs": "2.3.5",
-    "@rollup/plugin-babel": "6.0.4",
-    "babel-eslint": "10.1.0",
-    "concurrently": "7.6.0",
-    "eslint": "^7.0.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-decorator-position": "4.0.1",
-    "eslint-plugin-ember": "10.6.1",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-json": "3.1.0",
-    "eslint-plugin-node": "11.1.0",
-    "@ember/string": "3.1.1",
-    "eslint-plugin-prettier": "4.2.1",
-    "webpack": "^5.88.1",
-    "eslint-plugin-simple-import-sort": "7.0.0",
-    "rollup": "4.54.0"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/runtime": "^7.25.6",
+    "@ember/app-tsconfig": "^1.0.3",
+    "@ember/library-tsconfig": "^1.0.0",
+    "@ember/test-helpers": "^5.2.1",
+    "@ember/test-waiters": "^4.1.1",
+    "@embroider/addon-dev": "^8.1.0",
+    "@embroider/compat": "^4.1.0",
+    "@embroider/core": "^4.1.0",
+    "@embroider/macros": "^1.18.0",
+    "@embroider/vite": "^1.1.5",
+    "@eslint/js": "^9.17.0",
+    "@glimmer/component": "^2.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "babel-plugin-ember-template-compilation": "^2.2.5",
+    "concurrently": "^9.0.1",
+    "ember-concurrency": "5.1.0",
+    "ember-modifier": "4.2.2",
+    "ember-page-title": "^9.0.3",
+    "ember-qunit": "^9.0.2",
+    "ember-source": "^6.7.0",
+    "ember-strict-application-resolver": "^0.1.0",
+    "ember-template-lint": "^7.9.0",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-ember": "^12.3.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.15.1",
+    "globals": "^16.1.0",
+    "netlify-cli": "^23.13.0",
+    "node-gyp": "^12.1.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-ember-template-tag": "^2.0.4",
+    "qunit": "^2.24.1",
+    "qunit-dom": "^3.4.0",
+    "rollup": "^4.22.5",
+    "sinon": "^21.0.1",
+    "tailwindcss": "^4.0.0",
+    "testem": "^3.15.1",
+    "vite": "^7.1.9"
   },
   "ember": {
     "edition": "octane"
   },
-  "keywords": [
-    "ember-addon"
-  ],
   "ember-addon": {
     "version": 2,
     "type": "addon",
-    "main": "./addon-main.cjs",
+    "main": "addon-main.cjs",
     "app-js": {
       "./components/safe-button/animations/flip.js": "./dist/_app_/components/safe-button/animations/flip.js",
       "./components/safe-button/animations/index.js": "./dist/_app_/components/safe-button/animations/index.js",
@@ -73,22 +99,18 @@
       "./modifiers/animate-me.js": "./dist/_app_/modifiers/animate-me.js"
     }
   },
-  "engines": {
-    "node": "12.* || 14.* || >= 16"
-  },
-  "volta": {
-    "extends": "../package.json"
-  },
   "scripts": {
-    "start": "concurrently 'npm:watch:*'",
-    "build": "concurrently 'npm:build:*'",
-    "build:js": "rollup -c ./rollup.config.mjs",
-    "build:docs": "cp ../README.md ./README.md",
-    "watch:js": "rollup -c --watch --no-watch.clearScreen",
-    "lint": "concurrently 'npm:lint:js'",
-    "lint:fix": "concurrently 'npm:lint:js:fix'",
+    "build": "rollup --config",
+    "format": "prettier . --cache --write",
+    "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
+    "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
+    "lint:format": "prettier . --cache --check",
+    "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
+    "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "test": "echo 'Addon does not have tests, run tests in test-app'"
+    "start": "vite dev",
+    "demo:build": "pnpm build && VITE_BUILD_TARGET=demo vite build --out-dir dist-demo --emptyOutDir",
+    "test": "vite build --mode=development --out-dir dist-tests && testem --file testem.cjs ci --port 0"
   }
 }

package/src/components/safe-button/animations/flip.js

@@ -0,0 +1,114 @@
+// TODO: https://github.com/animate-css/animate.css/blob/main/source/flippers/flipOutX.css
+// TODO: https://github.com/animate-css/animate.css/blob/main/source/flippers/flipInX.css
+export default {
+  safety: {
+    unlocking: {
+      keyframes: [
+        { transform: 'perspective(400px)', offset: 0 },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
+          offset: 0.3 / 2,
+          opacity: 1,
+        },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+          offset: 1 / 2,
+          opacity: 0,
+        },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'forwards',
+        easing: 'ease-in',
+      },
+    },
+    locking: {
+      keyframes: [
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+          offset: 0,
+          opacity: 0,
+        },
+        {
+          transform: ['perspective(400px)', 'rotate3d(1, 0, 0, -20deg)'],
+          offset: 0.4 / 2 + 0.5,
+        },
+        {
+          transform: ['perspective(400px)', 'rotate3d(1, 0, 0, 10deg)'],
+          offset: 0.6 / 2 + 0.5,
+          opacity: 1,
+        },
+        {
+          transform: ['perspective(400px)', 'rotate3d(1, 0, 0, -5deg)'],
+          offset: 0.8 / 2 + 0.5,
+          opacity: 1,
+        },
+        {
+          transform: 'perspective(400px)',
+          offset: 1 / 2 + 0.5,
+          opacity: 1,
+        },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'forwards',
+        easing: 'ease-in',
+      },
+    },
+  },
+  trigger: {
+    unlocking: {
+      keyframes: [
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+          offset: 0 + 0.5,
+          opacity: 0,
+        },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
+          offset: 0.4 / 2 + 0.5,
+        },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)',
+          offset: 0.6 / 2 + 0.5,
+          opacity: 1,
+        },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)',
+          offset: 0.8 / 2 + 0.5,
+          opacity: 1,
+        },
+        {
+          transform: 'perspective(400px)',
+          offset: 1 / 2 + 0.5,
+          opacity: 1,
+        },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'forwards',
+        easing: 'ease-in',
+      },
+    },
+    locking: {
+      keyframes: [
+        { transform: 'perspective(400px)', offset: 0 },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
+          offset: 0.3 / 2,
+          opacity: 1,
+        },
+        {
+          transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+          offset: 1 / 2,
+          opacity: 0,
+        },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'forwards',
+        easing: 'ease-in',
+      },
+    },
+  },
+};

package/src/components/safe-button/animations/index.js

@@ -0,0 +1,15 @@
+import poing from './poing.js';
+import slide from './slide.js';
+import roll from './roll.js';
+import flip from './flip.js';
+import liftBars from './lift-bars.js';
+import zoom from './zoom.js';
+
+export default {
+  poing,
+  slide,
+  flip,
+  zoom,
+  roll,
+  'lift-bars': liftBars,
+};

package/src/components/safe-button/animations/lift-bars.js

@@ -0,0 +1,50 @@
+export default {
+  safety: {
+    unlocking: {
+      keyframes: [
+        { transform: 'translate3d(0, 0, 0)' },
+        { transform: 'translate3d(0, -100%, 0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { transform: 'translate3d(0, -100%, 0)' },
+        { transform: 'translate3d(0, 0, 0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+  trigger: {
+    unlocking: {
+      keyframes: [
+        // { transform: 'translateX(100%)' },
+        // { transform: 'translateX(0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        // { transform: 'translateX(0)' },
+        // { transform: 'translateX(100%)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+};

package/src/components/safe-button/animations/poing.js

@@ -0,0 +1,99 @@
+export default {
+  safety: {
+    unlocking: {
+      keyframes: [
+        { transform: 'scale(1)', opacity: 1, offset: 0 },
+        {
+          transform: 'translateX(0px) scale(0.7)',
+          opacity: 0.7,
+          offset: 0.2,
+        },
+        {
+          transform: 'translateX(-2000px) scale(0.7)',
+          opacity: 0.7,
+          offset: 1,
+        },
+      ],
+      options: {
+        duration: 2000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        {
+          transform: 'translateX(-2000px) scale(0.7)',
+          opacity: 0.7,
+          offset: 0,
+        },
+        {
+          transform: 'translateX(0px) scale(0.7)',
+          opacity: 0.7,
+          offset: 0.8,
+        },
+        { transform: 'scale(1)', opacity: 1, offset: 1 },
+      ],
+      options: {
+        duration: 2000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+  trigger: {
+    unlocking: {
+      keyframes: [
+        {
+          opacity: 0,
+          transform: 'translate3d(3000px, 0, 0) scaleX(3)',
+          offset: 0,
+        },
+        {
+          opacity: 1,
+          transform: 'translate3d(-25px, 0, 0) scaleX(1)',
+          offset: 0.6,
+        },
+        {
+          opacity: 1,
+          transform: 'translate3d(10px, 0, 0) scaleX(0.98)',
+          offset: 0.75,
+        },
+        {
+          opacity: 1,
+          transform: 'translate3d(-5px, 0, 0) scaleX(0.995)',
+          offset: 0.9,
+        },
+        {
+          opacity: 1,
+          transform: 'translate3d(0, 0, 0)',
+          offset: 1,
+        },
+      ],
+      options: {
+        duration: 2000,
+        fill: 'both',
+        easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+      },
+    },
+    locking: {
+      keyframes: [
+        {
+          opacity: 1,
+          transform: 'translate3d(-20px, 0, 0) scaleX(0.9)',
+          offset: 0.2,
+        },
+        {
+          opacity: 0,
+          transform: 'translate3d(2000px, 0, 0) scaleX(2)',
+          offset: 1,
+        },
+      ],
+      options: {
+        duration: 2000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+};

package/src/components/safe-button/animations/roll.js

@@ -0,0 +1,50 @@
+export default {
+  safety: {
+    unlocking: {
+      keyframes: [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-100%) rotate(-180deg)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { transform: 'translateX(-100%) rotate(-180deg)' },
+        { transform: 'translateX(0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+  trigger: {
+    unlocking: {
+      keyframes: [
+        { transform: 'translateX(100%) rotate(180deg)' },
+        { transform: 'translateX(0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(100%) rotate(180deg)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+};

package/src/components/safe-button/animations/slide.js

@@ -0,0 +1,50 @@
+export default {
+  safety: {
+    unlocking: {
+      keyframes: [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-100%)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { transform: 'translateX(-100%)' },
+        { transform: 'translateX(0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+  trigger: {
+    unlocking: {
+      keyframes: [
+        { transform: 'translateX(100%)' },
+        { transform: 'translateX(0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(100%)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+};

package/src/components/safe-button/animations/zoom.js

@@ -0,0 +1,52 @@
+export default {
+  safety: {
+    unlocking: {
+      keyframes: [
+        { offset: 0, transform: 'translate3d(0, 0, 0)' },
+        { offset: 1, transform: 'translate3d(100%, 0, 0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { offset: 0, transform: 'translate3d(-100%, 0, 0)' },
+        { offset: 1, transform: 'translate3d(0, 0, 0)' },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+  trigger: {
+    unlocking: {
+      keyframes: [
+        { offset: 0, opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)' },
+        { offset: 0.5, opacity: 1 },
+        { offset: 1, opacity: 1 },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+    locking: {
+      keyframes: [
+        { offset: 0, opacity: 1 },
+        { offset: 0.5, opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)' },
+        { offset: 1, opacity: 0 },
+      ],
+      options: {
+        duration: 1000,
+        fill: 'both',
+        easing: 'ease',
+      },
+    },
+  },
+};