From f2a914773310eadfc0c2fa5cc12f559ac349eb86 Mon Sep 17 00:00:00 2001 From: Gavin Joyce Date: Fri, 2 Oct 2020 21:14:04 +0100 Subject: [PATCH] initial `` component --- addon/components/switch.hbs | 18 ++++++ addon/components/switch.js | 35 ++++++++++++ addon/components/switch/button.hbs | 12 ++++ addon/components/switch/label.hbs | 7 +++ app/components/switch.js | 1 + app/components/switch/button.js | 1 + app/components/switch/label.js | 1 + package.json | 1 + tests/dummy/app/router.js | 4 ++ tests/dummy/app/templates/index.hbs | 8 +++ .../app/templates/switch/switch-basic.hbs | 22 +++++++ yarn.lock | 57 ++++++++++++++++++- 12 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 addon/components/switch.hbs create mode 100644 addon/components/switch.js create mode 100644 addon/components/switch/button.hbs create mode 100644 addon/components/switch/label.hbs create mode 100644 app/components/switch.js create mode 100644 app/components/switch/button.js create mode 100644 app/components/switch/label.js create mode 100644 tests/dummy/app/templates/switch/switch-basic.hbs diff --git a/addon/components/switch.hbs b/addon/components/switch.hbs new file mode 100644 index 00000000..212d0bd0 --- /dev/null +++ b/addon/components/switch.hbs @@ -0,0 +1,18 @@ +
+ {{yield (hash + isChecked=@isChecked + Label=( + component 'switch/label' + guid=this.labelGuid + onPointerUp=this.onLabelPointerUp + ) + Button=( + component 'switch/button' + guid=this.buttonGuid + labelGuid=this.labelGuid + isChecked=@isChecked + onClick=this.onButtonClick + onKeyUp=this.onButtonKeyUp + ) + )}} +
\ No newline at end of file diff --git a/addon/components/switch.js b/addon/components/switch.js new file mode 100644 index 00000000..101ffb83 --- /dev/null +++ b/addon/components/switch.js @@ -0,0 +1,35 @@ +import Component from "@glimmer/component"; +import { action } from "@ember/object"; +import { guidFor } from "@ember/object/internals"; + +export default class Switch extends Component { + guid = `${guidFor(this)}-tailwindui-switch`; + labelGuid = `${this.guid}-label`; + buttonGuid = `${this.guid}-button`; + + @action + onLabelPointerUp() { + let buttonElement = document.getElementById(this.buttonGuid); + buttonElement.click(); + buttonElement.focus(); + } + + @action + onButtonClick(event) { + event.preventDefault(); + this._toggle(); + } + + @action + onButtonKeyUp(event) { + event.preventDefault(); + if (event.key === " ") { + event.preventDefault(); + this._toggle(); + } + } + + _toggle() { + this.args.onUpdate(!this.args.isChecked); + } +} diff --git a/addon/components/switch/button.hbs b/addon/components/switch/button.hbs new file mode 100644 index 00000000..4adbaf9d --- /dev/null +++ b/addon/components/switch/button.hbs @@ -0,0 +1,12 @@ +
+ {{yield}} +
\ No newline at end of file diff --git a/addon/components/switch/label.hbs b/addon/components/switch/label.hbs new file mode 100644 index 00000000..b7145df5 --- /dev/null +++ b/addon/components/switch/label.hbs @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/app/components/switch.js b/app/components/switch.js new file mode 100644 index 00000000..28cff19a --- /dev/null +++ b/app/components/switch.js @@ -0,0 +1 @@ +export { default } from "ember-headlessui/components/switch"; diff --git a/app/components/switch/button.js b/app/components/switch/button.js new file mode 100644 index 00000000..4cd0c0b6 --- /dev/null +++ b/app/components/switch/button.js @@ -0,0 +1 @@ +export { default } from "ember-headlessui/components/switch/button"; diff --git a/app/components/switch/label.js b/app/components/switch/label.js new file mode 100644 index 00000000..874c452f --- /dev/null +++ b/app/components/switch/label.js @@ -0,0 +1 @@ +export { default } from "ember-headlessui/components/switch/label"; diff --git a/package.json b/package.json index cb768d64..d6816038 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "ember-on-helper": "^0.1.0", "ember-qunit": "^4.6.0", "ember-resolver": "^8.0.2", + "ember-simple-set-helper": "^0.1.2", "ember-source": "~3.21.1", "ember-source-channel-url": "^3.0.0", "ember-template-lint": "^2.11.0", diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index bc27caaa..1778fa25 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -13,4 +13,8 @@ Router.map(function () { this.route("menu-with-transition"); this.route("menu-with-transition-and-popper"); }); + + this.route("switch", function () { + this.route("switch-basic"); + }); }); diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index 9cd99cb6..3f2d8564 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -21,6 +21,14 @@ +
  • +

    Switch

    + +
    • diff --git a/tests/dummy/app/templates/switch/switch-basic.hbs b/tests/dummy/app/templates/switch/switch-basic.hbs new file mode 100644 index 00000000..0872096b --- /dev/null +++ b/tests/dummy/app/templates/switch/switch-basic.hbs @@ -0,0 +1,22 @@ + +
    + + Enable notifications + + + + +
    \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2399ba5a..320c55db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2113,6 +2113,11 @@ babel-plugin-htmlbars-inline-precompile@^1.0.0: resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-1.0.0.tgz#a9d2f6eaad8a3f3d361602de593a8cbef8179c22" integrity sha512-4jvKEHR1bAX03hBDZ94IXsYCj3bwk9vYsn6ux6JZNL2U5pvzCWjqyrGahfsGNrhERyxw8IqcirOi9Q6WCo3dkQ== +babel-plugin-htmlbars-inline-precompile@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-3.2.0.tgz#c4882ea875d0f5683f0d91c1f72e29a4f14b5606" + integrity sha512-IUeZmgs9tMUGXYu1vfke5I18yYJFldFGdNFQOWslXTnDWXzpwPih7QFduUqvT+awDpDuNtXpdt5JAf43Q1Hhzg== + babel-plugin-htmlbars-inline-precompile@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-4.2.0.tgz#73e7a199c14db139b9c9aea240e03b7112784c81" @@ -3011,6 +3016,13 @@ broccoli-node-info@^2.1.0: resolved "https://registry.yarnpkg.com/broccoli-node-info/-/broccoli-node-info-2.1.0.tgz#ca84560e8570ff78565bea1699866ddbf58ad644" integrity sha512-l6qDuboJThHfRVVWQVaTs++bFdrFTP0gJXgsWenczc1PavRVUmL1Eyb2swTAXXMpDOnr2zhNOBLx4w9AxkqbPQ== +broccoli-output-wrapper@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/broccoli-output-wrapper/-/broccoli-output-wrapper-2.0.0.tgz#f1e0b9b2f259a67fd41a380141c3c20b096828e6" + integrity sha512-V/ozejo+snzNf75i/a6iTmp71k+rlvqjE3+jYfimuMwR1tjNNRdtfno+NGNQB2An9bIAeqZnKhMDurAznHAdtA== + dependencies: + heimdalljs-logger "^0.1.10" + broccoli-output-wrapper@^3.2.1: version "3.2.3" resolved "https://registry.yarnpkg.com/broccoli-output-wrapper/-/broccoli-output-wrapper-3.2.3.tgz#e5c9de7c881570eb4c0b0d194bb12d9671b25a9b" @@ -3039,7 +3051,7 @@ broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3: symlink-or-copy "^1.0.1" walk-sync "^0.3.1" -broccoli-persistent-filter@^2.1.0, broccoli-persistent-filter@^2.2.1, broccoli-persistent-filter@^2.2.2, broccoli-persistent-filter@^2.3.0: +broccoli-persistent-filter@^2.1.0, broccoli-persistent-filter@^2.2.1, broccoli-persistent-filter@^2.2.2, broccoli-persistent-filter@^2.3.0, broccoli-persistent-filter@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-2.3.1.tgz#4a052e0e0868b344c3a2977e35a3d497aa9eca72" integrity sha512-hVsmIgCDrl2NFM+3Gs4Cr2TA6UPaIZip99hN8mtkaUPgM8UeVnCbxelCvBjUBHo0oaaqP5jzqqnRVvb568Yu5g== @@ -3106,6 +3118,19 @@ broccoli-plugin@^2.1.0: rimraf "^2.3.4" symlink-or-copy "^1.1.8" +broccoli-plugin@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-3.1.0.tgz#54ba6dd90a42ec3db5624063292610e326b1e542" + integrity sha512-7w7FP8WJYjLvb0eaw27LO678TGGaom++49O1VYIuzjhXjK5kn2+AMlDm7CaUFw4F7CLGoVQeZ84d8gICMJa4lA== + dependencies: + broccoli-node-api "^1.6.0" + broccoli-output-wrapper "^2.0.0" + fs-merger "^3.0.1" + promise-map-series "^0.2.1" + quick-temp "^0.1.3" + rimraf "^2.3.4" + symlink-or-copy "^1.1.8" + broccoli-plugin@^4.0.1, broccoli-plugin@^4.0.2, broccoli-plugin@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-4.0.3.tgz#9dcfbfb6a1b27a37cc22e65c071719ce9f92bc1e" @@ -4582,6 +4607,26 @@ ember-cli-htmlbars-inline-precompile@^2.1.0: heimdalljs-logger "^0.1.9" silent-error "^1.1.0" +ember-cli-htmlbars@^4.2.2: + version "4.4.0" + resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.4.0.tgz#7ca17d5ca8f7550984346d9e6e93da0c3323f8d9" + integrity sha512-ohgctqk7dXIZR4TgN0xRoUYltWhghFJgqmtuswQTpZ7p74RxI9PKx+E8WV/95mGcPzraesvMNBg5utQNvcqgNg== + dependencies: + "@ember/edition-utils" "^1.2.0" + babel-plugin-htmlbars-inline-precompile "^3.2.0" + broccoli-debug "^0.6.5" + broccoli-persistent-filter "^2.3.1" + broccoli-plugin "^3.1.0" + common-tags "^1.8.0" + ember-cli-babel-plugin-helpers "^1.1.0" + fs-tree-diff "^2.0.1" + hash-for-dep "^1.5.1" + heimdalljs-logger "^0.1.10" + json-stable-stringify "^1.0.1" + semver "^6.3.0" + strip-bom "^4.0.0" + walk-sync "^2.0.2" + ember-cli-htmlbars@^5.1.0, ember-cli-htmlbars@^5.2.0, ember-cli-htmlbars@^5.3.1: version "5.3.1" resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.3.1.tgz#61793964fc2599ce750db9e972ab55c6dd177c48" @@ -5010,6 +5055,14 @@ ember-router-generator@^2.0.0: "@babel/traverse" "^7.4.5" recast "^0.18.1" +ember-simple-set-helper@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/ember-simple-set-helper/-/ember-simple-set-helper-0.1.2.tgz#f0aad11f35df5f0396561ee4552c1790d8ef0930" + integrity sha512-Dx66Ki7tqd3R0MpAmE1j1pTI/K5OAcW4XYpz0T23x8KVUWbaZE9zGGUPlxsczf/44ML3kyIvS7rzQ+6DHS7dkw== + dependencies: + ember-cli-babel "^7.17.2" + ember-cli-htmlbars "^4.2.2" + ember-source-channel-url@^1.0.1: version "1.2.0" resolved "https://registry.yarnpkg.com/ember-source-channel-url/-/ember-source-channel-url-1.2.0.tgz#77eb9d0889e5f5370e6c70fcb2696c63ff4a34a1" @@ -6138,7 +6191,7 @@ fs-extra@^9.0.0: jsonfile "^6.0.1" universalify "^1.0.0" -fs-merger@^3.1.0: +fs-merger@^3.0.1, fs-merger@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/fs-merger/-/fs-merger-3.1.0.tgz#f30f74f6c70b2ff7333ec074f3d2f22298152f3b" integrity sha512-RZ9JtqugaE8Rkt7idO5NSwcxEGSDZpLmVFjtVQUm3f+bWun7JAU6fKyU6ZJUeUnKdJwGx8uaro+K4QQfOR7vpA==