{"id":18433532,"url":"https://github.com/tonkpils/ember-sweetalert","last_synced_at":"2025-04-07T19:31:28.803Z","repository":{"id":39620150,"uuid":"58317533","full_name":"Tonkpils/ember-sweetalert","owner":"Tonkpils","description":"Ember CLI addon for SweetAlert2","archived":false,"fork":false,"pushed_at":"2023-03-04T03:29:28.000Z","size":4944,"stargazers_count":20,"open_issues_count":13,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-22T23:04:06.377Z","etag":null,"topics":["addon","ember-addon","javascript","sweetalert"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tonkpils.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-08T15:07:10.000Z","updated_at":"2024-12-18T07:32:06.000Z","dependencies_parsed_at":"2024-06-21T15:36:56.376Z","dependency_job_id":"bde53291-a4dc-405f-b416-b9d1a645c326","html_url":"https://github.com/Tonkpils/ember-sweetalert","commit_stats":{"total_commits":91,"total_committers":9,"mean_commits":10.11111111111111,"dds":0.5604395604395604,"last_synced_commit":"93d9a3d3c74753a35c6b356d4419948e0566c222"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2Fember-sweetalert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2Fember-sweetalert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2Fember-sweetalert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2Fember-sweetalert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tonkpils","download_url":"https://codeload.github.com/Tonkpils/ember-sweetalert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247716261,"owners_count":20984208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","ember-addon","javascript","sweetalert"],"created_at":"2024-11-06T05:34:49.389Z","updated_at":"2025-04-07T19:31:28.437Z","avatar_url":"https://github.com/Tonkpils.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ember Sweet Alert\n==============================================================================\n\nAn [ember-cli](http://www.ember-cli.com/) addon for using\n[SweetAlert2](https://sweetalert2.github.io/) in Ember applications.\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v3.16 or above\n* Ember CLI v2.13 or above\n* Node.js v10 or above\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-sweetalert\n```\n\nIE11 requires the Babel polyfill to be present, otherwise you'll get a\n`Promise is undefined` error.\n[As per this comment](https://github.com/babel/ember-cli-babel/issues/40#issuecomment-268952820)\nyou can add it via your `ember-cli-build.js` file as follows:\n\n```js\n// ember-cli-build.js\nlet app = new EmberApp(defaults, {\n  'ember-cli-babel': {\n    includePolyfill: true\n  }\n});\n```\n\n\nUsage\n------------------------------------------------------------------------------\n\n### In your templates\n\n#### Basic Usage\n\nThe `sweet-alert` component allows setting SweetAlert's attributes.\n\n```hbs\n\u003cSweetAlert @title=\"Hello World\" /\u003e\n```\n\nBy default the alert will be open as soon as the template is rendered. See below\nfor controlling whether the alert is open.\n\n#### Configuration\n\nAll Sweet Alert options [Sweet Alert configuration options](https://sweetalert2.github.io/#configuration)\ncan also be passed in as arguments:\n\n```hbs\n\u003cSweetAlert\n  @title=\"Hello World\"\n  @text=\"Welcome to our website.\"\n  @icon=\"success\"\n  @footer=\"Nothing else to say.\"\n  @allowOutsideClick={{false}}\n/\u003e\n```\n\nIf there are defaults that you want to set for every alert, you can set these\nin your environment config, e.g.:\n\n```js\nENV['ember-sweetalert'] = {\n  target: '#my-sweetalert',\n  allowOutsideClick: false\n};\n```\n\n#### Opening\n\nBy default the alert will be open when the component is rendered. To control\nthis behaviour, use the `show` attribute. For example to open the alert when\na button is clicked:\n\n```hbs\n{{! sayHello === false to start }}\n\u003cSweetAlert\n  @show={{this.sayHello}}\n  @title=\"Hello World\"\n  @text=\"Welcome to our website.\"\n  @icon=\"success\"\n/\u003e\n\n\u003cbutton {{action (mut sayHello) true}}\u003eClick Me\u003c/button\u003e\n```\n\nThe Sweet Alert component follows the Data-Down, Action Up (DDAU) pattern.\nThis means in the example above, the alert will only show once, as `sayHello`\nwill remain `true` once the alert is closed. To allow an alert to be\nopen/closed any number of times, use an action to set the show variable back\nto `false` once the alert is closed. For example:\n\n```hbs\n{{! sayHello === false to start }}\n\u003cSweetAlert\n  @show={{this.sayHello}}\n  @title=\"Hello World\"\n  @text=\"Welcome to our website.\"\n  @icon=\"success\"\n  @willClose={{action (mut this.sayHello) false}}\n/\u003e\n\n\u003cbutton {{action (mut this.sayHello) true}}\u003eClick Me\u003c/button\u003e\n```\n\n#### Actions\n\nThe component supports all the Sweet Alert actions allowed via configuration:\n  - `willOpen`\n  - `didOpen`\n  - `didRender`\n  - `willClose`\n  - `didClose`\n  - `didDestroy`\n\nIn addition, the component also supports the following two actions:\n  - `onConfirm`: invoked if the user clicks the confirm button within the alert.\n  - `onCancel`: invoked if the user closes the alert without confirmation.\n\nBoth actions receive the return value from Sweet Alert.\n\nThe following example collects an email from a user, giving them a different\nmessage based on whether they provided the email or cancelled:\n\n```js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class JoinMailingListComponent extends Component {\n  @tracked enterEmail = false;\n  @tracked email;\n  @tracked sayThankYou = false;\n  @tracked didNotJoin = false;\n\n  @action\n  collectEmail() {\n    this.enterEmail = true;\n  }\n\n  @action\n  join({ value }) {\n    this.email = value;\n    this.enterEmail = false;\n    this.sayThankYou = true;\n  }\n\n  @action\n  didCancel() {\n    this.enterEmail = false;\n    this.didNotJoin = true;\n  }\n\n  @action\n  reset() {\n    this.enterEmail = false;\n    this.email = null;\n    this.sayThankYou = false;\n    this.didNotJoin = false;\n  }\n}\n```\n\n```hbs\n\u003cbutton {{on \"click\" this.collectEmail}}\u003eJoin Mailing List\u003c/button\u003e\n\n\u003cSweetAlert\n  @show={{this.enterEmail}}\n  @title=\"Submit email to join our mailing list\"\n  @input=\"email\"\n  @showCancelButton={{true}}\n  @confirmButtonText=\"Join\"\n  @onConfirm={{this.join}}\n  @onCancel={{this.didCancel}}\n/\u003e\n\n\u003cSweetAlert\n  @show={{this.sayThankYou}}\n  @title=\"Thank You!\"\n  @text=\"You are now on our mailing list.\"\n  @icon=\"success\"\n  @willClose={{this.reset}}\n/\u003e\n\n\u003cSweetAlert\n  @show={{this.didNotJoin}}\n  @title=\":-(\"\n  @text=\"Ok, we won't add you to our mailing list.\"\n  @willClose={{this.reset}}\n/\u003e\n```\n\n### In your code\n\n#### Service\n\nThe recommended way to use SweetAlert in your code is to inject the `swal`\nservice and use the `fire` method. The service ensures your default\nSweetAlert config is used, plus integrates with the Ember run loop.\n\nHere is an example:\n\n```js\nimport Component from '@ember/component';\nimport { inject as service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class DeleteModelComponent extends Component {\n  @service swal;\n\n  @action\n  async confirm() {\n    let { value } = await this.swal.fire({\n      title: 'Are you sure?',\n      showCancelButton: true\n    });\n\n    if (value) {\n      this.args.model.destroyRecord();\n    }\n  }\n}\n```\n\nThe service also exposes the [SweetAlert methods](https://sweetalert2.github.io/#methods),\nscheduling any action methods on the Ember run loop.\n\n#### Import it\n\nIf you really need to you can import SweetAlert easily with:\n\n```js\nimport Swal from 'sweetalert2';\n```\n\n\u003e Using SweetAlert directly as an import will not have your default settings\nand will not be run-loop aware.\n\n### In your tests\n\n#### Setup\n\nYou will need to set the target for Sweet Alert to the Ember testing `div`.\nAdd the following to your environment config:\n\n```js\nif (environment === 'test') {\n  ENV.APP.rootElement = '#ember-testing';\n  // ...\n  ENV['ember-sweetalert'] = { target: ENV.APP.rootElement };\n}\n```\n\n#### Test Helpers\n\nThis addon provides a number of test helpers that can be used in acceptance or\nrendering tests.\n\nTest helpers can be imported from `ember-sweetalert/test-support`. The\navailable helpers are:\n\n| Helper | Description |\n| :--- | :--- |\n| `open(target)` | Clicks the specified target and waits for Sweet Alert to open. |\n| `confirm` | Clicks the Sweet Alert confirm button. |\n| `confirmAndClose` | Clicks the Sweet Alert confirm button and waits for it to close. |\n| `cancel` | Clicks the Sweet Alert cancel button. |\n| `cancelAndClose` | Clicks the Sweet Alert cancel button and waits for it to close. |\n| `waitForOpen` | Wait for Sweet Alert to open. |\n| `waitForClose` | Wait for Sweet Alert to close. |\n\nAn example acceptance test:\n\n```js\nimport { module, test } from 'qunit';\nimport { visit, fillIn } from '@ember/test-helpers';\nimport { setupApplicationTest } from 'ember-qunit';\nimport { open, confirmAndClose } from 'ember-sweetalert/test-support';\n\nmodule('Acceptance | join mailing list', function(hooks) {\n  setupApplicationTest(hooks);\n\n  test('user can join mailing list', async function(assert) {\n    await visit('/');\n    await open('button.join');\n    await fillIn('input[type=\"email\"]', 'foo@example.com');\n    await confirmAndClose();\n\n    assert.dom('.email').hasText('Your email is: foo@example.com');\n  });\n});\n```\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonkpils%2Fember-sweetalert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonkpils%2Fember-sweetalert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonkpils%2Fember-sweetalert/lists"}