New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
makeup-listbox-button
Advanced tools
makeup-listbox-button - npm Package Compare versions
Comparing version 0.0.1 to 0.1.0
@@ -9,4 +9,2 @@ "use strict"; | ||
| function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -36,3 +34,3 @@ | ||
| this._options = _extends({}, defaultOptions, selectedOptions); | ||
| this._options = Object.assign({}, defaultOptions, selectedOptions); | ||
| this.el = widgetEl; | ||
@@ -202,2 +200,2 @@ this._buttonEl = this.el.querySelector('button'); | ||
| } | ||
| } | ||
| } |
| { | ||
| "name": "makeup-listbox-button", | ||
| "version": "0.0.1", | ||
| "version": "0.1.0", | ||
| "lockfileVersion": 1, | ||
| "requires": true, | ||
| "dependencies": { | ||
| "custom-event": { | ||
| "version": "1.0.1", | ||
| "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", | ||
| "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=" | ||
| }, | ||
| "makeup-active-descendant": { | ||
| "version": "0.3.9", | ||
| "resolved": "https://registry.npmjs.org/makeup-active-descendant/-/makeup-active-descendant-0.3.9.tgz", | ||
| "integrity": "sha512-YsVRw/i6xAUSv0RbjCqzPTl2uKeYSeBdaZZUvTGCLGPr9RO+W0cEfNgWnvFP8301QhcWC63UhD8VLLsH9v0r5Q==", | ||
| "version": "0.4.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-active-descendant/-/makeup-active-descendant-0.4.0.tgz", | ||
| "integrity": "sha512-IV9wsQcaqzaFQu//TPPeS3Opnkng2EMw+lQPnSYYVwht9uCqnE/aSebsSxYRg2cXENWxu9Sw+iGEv5PsJYTu2A==", | ||
| "requires": { | ||
| "custom-event": "^1", | ||
| "makeup-navigation-emitter": "~0.3.8", | ||
| "makeup-next-id": "~0.1.3", | ||
| "nodelist-foreach-polyfill": "^1" | ||
| "makeup-navigation-emitter": "~0.4.0", | ||
| "makeup-next-id": "~0.2.0" | ||
| } | ||
| }, | ||
| "makeup-exit-emitter": { | ||
| "version": "0.2.6", | ||
| "resolved": "https://registry.npmjs.org/makeup-exit-emitter/-/makeup-exit-emitter-0.2.6.tgz", | ||
| "integrity": "sha512-Z96cKFAZ2MZNmu24qylOhStUNrNMDVAqJuDdfocH71/MN3dn23k9QhNr0mXFIs3c72Gyn1Wg5qqNbeO5ZTSMOQ==", | ||
| "version": "0.3.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-exit-emitter/-/makeup-exit-emitter-0.3.0.tgz", | ||
| "integrity": "sha512-vmEsvMSsbKpruRubJOnSxqipcuYDhpGRegxru8QC5tY0t63jm2CAAXhTvaH9XtNXxcyPSUuaHYh6nuu4pJWzCQ==", | ||
| "requires": { | ||
| "custom-event": "^1", | ||
| "makeup-next-id": "~0.1.3" | ||
| "makeup-next-id": "~0.2.0" | ||
| } | ||
| }, | ||
| "makeup-expander": { | ||
| "version": "0.8.7", | ||
| "resolved": "https://registry.npmjs.org/makeup-expander/-/makeup-expander-0.8.7.tgz", | ||
| "integrity": "sha512-GqUxmNlOJsbjM945CTwfvGRM0m2EzXf80Klh5TBxdGFEJdHnLp4tjWlbfJ9MrcxDQsrKaY906YTKjt01pYtYyg==", | ||
| "version": "0.9.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-expander/-/makeup-expander-0.9.0.tgz", | ||
| "integrity": "sha512-mGyHoSPbmRiKA1ex6DVMY0Oo3ZOOmSeTSrWMFBAV7hrGKPBeX5MGYVb21ZejRC2gbQ7FCG/mv74mB4OP2/kZVg==", | ||
| "requires": { | ||
| "custom-event": "^1", | ||
| "makeup-exit-emitter": "^0.2.6", | ||
| "makeup-focusables": "^0.1.0", | ||
| "makeup-next-id": "^0.1.3" | ||
| "makeup-exit-emitter": "~0.3.0", | ||
| "makeup-focusables": "~0.2.0", | ||
| "makeup-next-id": "~0.2.0" | ||
| } | ||
| }, | ||
| "makeup-focusables": { | ||
| "version": "0.1.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-focusables/-/makeup-focusables-0.1.0.tgz", | ||
| "integrity": "sha512-rBUb7cECtGGC60Z1zRjEUyweCh4gMqWOUzDERLu2xEKBGdh+upDciOucrLiGt/gawJhFnI+HA3AabLSo6mm43Q==" | ||
| "version": "0.2.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-focusables/-/makeup-focusables-0.2.0.tgz", | ||
| "integrity": "sha512-Pgt25/gD7M9Uq5AUA/Hw6YAewtD5uYD7wfWAKuE0tLNa4JUDyhsjdTHKKGy74eGNFCJgbpEvUJ1fjtZkNbwkWA==" | ||
| }, | ||
| "makeup-key-emitter": { | ||
| "version": "0.1.3", | ||
| "resolved": "https://registry.npmjs.org/makeup-key-emitter/-/makeup-key-emitter-0.1.3.tgz", | ||
| "integrity": "sha512-cykzWqrqGcL7f49QQHSPbocS2WrDcBv51ZhQNimhNhyHI5NCeU7wYUDiLet/6RstQIwhpGKt18U8BO585kUq8A==", | ||
| "requires": { | ||
| "custom-event": "^1" | ||
| } | ||
| "version": "0.2.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-key-emitter/-/makeup-key-emitter-0.2.0.tgz", | ||
| "integrity": "sha512-n8a3leknN+jexvrLksez4TK4mDUkiqFQpQvpuPm10JzHQLHHgHGBLi5AcClfhOMuYIutHxD2VYzRVkpSP9+/iw==" | ||
| }, | ||
| "makeup-listbox": { | ||
| "version": "0.0.1", | ||
| "resolved": "https://registry.npmjs.org/makeup-listbox/-/makeup-listbox-0.0.1.tgz", | ||
| "integrity": "sha512-k3arviCU9E10KUBcXxgdefuub71rAj3OD1jIBotsHjkD97FalicG2jPVTQHOD0B+qEjMQ9PfgEu+/Oztd9vAHw==", | ||
| "version": "0.1.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-listbox/-/makeup-listbox-0.1.0.tgz", | ||
| "integrity": "sha512-5kLV1eg4bC7XygzaWRYZnX+BNhtCZqad1cbCVhk3EaUMpbrcY3zLX6HBqtUS4Ah81n7HSZ548J7lFvHF+QHWzg==", | ||
| "requires": { | ||
| "custom-event": "^1", | ||
| "makeup-active-descendant": "~0.3.9", | ||
| "makeup-prevent-scroll-keys": "~0.0.4" | ||
| "makeup-active-descendant": "~0.4.0", | ||
| "makeup-prevent-scroll-keys": "~0.1.0" | ||
| } | ||
| }, | ||
| "makeup-navigation-emitter": { | ||
| "version": "0.3.8", | ||
| "resolved": "https://registry.npmjs.org/makeup-navigation-emitter/-/makeup-navigation-emitter-0.3.8.tgz", | ||
| "integrity": "sha512-MmJ8V2bRzntgGPU+eeIQBoZ7ZTpA4eh/jF4sZuoBtAxnoe0tUgOvUn8L/6u1n2qIfcqhdhdMcWhFweh+n6twXw==", | ||
| "version": "0.4.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-navigation-emitter/-/makeup-navigation-emitter-0.4.0.tgz", | ||
| "integrity": "sha512-L2IbpR/luwdGJlqY1RU5/jYuCMd7V43BFpIk9YluOb95UH0KWTZ2CAzH92bRMxbt0uj93FfrEwcZ5JVgThmCag==", | ||
| "requires": { | ||
| "custom-event": "^1", | ||
| "makeup-exit-emitter": "~0.2.6", | ||
| "makeup-key-emitter": "~0.1.2", | ||
| "nodelist-foreach-polyfill": "^1" | ||
| "makeup-exit-emitter": "~0.3.0", | ||
| "makeup-key-emitter": "~0.2.0" | ||
| } | ||
| }, | ||
| "makeup-next-id": { | ||
| "version": "0.1.3", | ||
| "resolved": "https://registry.npmjs.org/makeup-next-id/-/makeup-next-id-0.1.3.tgz", | ||
| "integrity": "sha512-X0iLqUblyFBbGA78JCTpoXno08NseFOBx6ywTKk0+o1A/rqs1fAr6xdNLGSQhAwbppIztGS3ByjZ/t/Gd7Azdg==", | ||
| "version": "0.2.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-next-id/-/makeup-next-id-0.2.0.tgz", | ||
| "integrity": "sha512-zS6EUYHoKRQuYJRfpglwLP7Y1mRoYkQezX/zkMwV1xtlB5DozIA7o3uhQdZdIwzldM0PVwrdVEQT5PXx6XbBBA==", | ||
| "requires": { | ||
@@ -86,5 +71,5 @@ "nanoid": "^2" | ||
| "makeup-prevent-scroll-keys": { | ||
| "version": "0.0.4", | ||
| "resolved": "https://registry.npmjs.org/makeup-prevent-scroll-keys/-/makeup-prevent-scroll-keys-0.0.4.tgz", | ||
| "integrity": "sha512-gwQJlWF0u2Rk02IN4Fwjzl4fMGJBBqUxf3TE0uVXLTlqveePFSlGksGwCJuicsFk1v0DYXV14gO1K9v0MuVjUw==" | ||
| "version": "0.1.0", | ||
| "resolved": "https://registry.npmjs.org/makeup-prevent-scroll-keys/-/makeup-prevent-scroll-keys-0.1.0.tgz", | ||
| "integrity": "sha512-j3iLRO1NtfKa+JJbO6Tyq8QFxMFWwC49ayZju1mllGfv9WEeOFZXLTjBKAzZBvw6UZK1f9MApin5FDWdBVoDEA==" | ||
| }, | ||
@@ -95,9 +80,4 @@ "nanoid": { | ||
| "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==" | ||
| }, | ||
| "nodelist-foreach-polyfill": { | ||
| "version": "1.2.0", | ||
| "resolved": "https://registry.npmjs.org/nodelist-foreach-polyfill/-/nodelist-foreach-polyfill-1.2.0.tgz", | ||
| "integrity": "sha512-hPW0tSoi1gJ3diSOyjFYOsYLZjnxF04psobzKA5GGGCz3fKHnLODwgdyXQq2cddYlvmT3q+ZNEBrfBdMkYPLaA==" | ||
| } | ||
| } | ||
| } |
| { | ||
| "name": "makeup-listbox-button", | ||
| "description": "A JavaScript class representing an ARIA listbox button", | ||
| "version": "0.0.1", | ||
| "version": "0.1.0", | ||
| "main": "dist/index.js", | ||
@@ -10,10 +10,10 @@ "repository": "https://github.com/makeup-js/makeup-js/tree/master/packages/makeup-listbox-button", | ||
| "scripts": { | ||
| "compile": "babel src/index.js --out-file dist/index.js" | ||
| "compile": "babel src --out-dir dist" | ||
| }, | ||
| "dependencies": { | ||
| "custom-event": "^1", | ||
| "makeup-expander": "~0.8.7", | ||
| "makeup-listbox": "~0.0.1" | ||
| "makeup-expander": "~0.9.0", | ||
| "makeup-listbox": "~0.1.0" | ||
| }, | ||
| "files": [ | ||
| "browser.json", | ||
| "dist/index.js", | ||
@@ -20,0 +20,0 @@ "package-lock.json" |
@@ -5,4 +5,6 @@ # makeup-listbox-button | ||
| ## Example | ||
| [View Demo](https://makeup.github.io/makeup-js/makeup-listbox-button/index.html). | ||
| ## HTML | ||
| The following markup structure and classnames are required. Any SVG icons can be used. | ||
@@ -16,3 +18,3 @@ | ||
| <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true"> | ||
| <use xlink:href="../style/icon.svg#icon-dropdown"></use> | ||
| <use xlink:href="icon.svg#icon-dropdown"></use> | ||
| </svg> | ||
@@ -26,3 +28,3 @@ </span> | ||
| <svg class="icon icon--tick-small" focusable="false" height="8" width="8"> | ||
| <use xlink:href="../style/icon.svg#icon-tick-small"></use> | ||
| <use xlink:href="icon.svg#icon-tick-small"></use> | ||
| </svg> | ||
@@ -33,3 +35,3 @@ </div> | ||
| <svg class="icon icon--tick-small" focusable="false" height="8" width="8"> | ||
| <use xlink:href="../style/icon.svg#icon-tick-small"></use> | ||
| <use xlink:href="icon.svg#icon-tick-small"></use> | ||
| </svg> | ||
@@ -40,3 +42,3 @@ </div> | ||
| <svg class="icon icon--tick-small" focusable="false" height="8" width="8"> | ||
| <use xlink:href="../style/icon.svg#icon-tick-small"></use> | ||
| <use xlink:href="icon.svg#icon-tick-small"></use> | ||
| </svg> | ||
@@ -49,10 +51,17 @@ </div> | ||
| Style: | ||
| ## CSS | ||
| No CSS is provided. However, the class is fully compatible with [eBay Skin](https://ebay.github.io/skin/#listbox-button). | ||
| Script: | ||
| ## JavaScript | ||
| ```js | ||
| const ListboxButton = require('makeup-listbox-button'); | ||
| document.querySelectorAll('.listbox-button').forEach(function(el, i) { | ||
| const widget = new ListboxButton(el, config); | ||
| el.addEventListener('makeup-listbox-button-change', function(e) { | ||
| console.log(e.type, e.detail); | ||
| }); | ||
| }); | ||
@@ -65,6 +74,4 @@ ``` | ||
| ### customElementMode | ||
| todo | ||
| Set to true if using the class as the model for a custom element (aka Web Component) | ||
| ## Events | ||
@@ -71,0 +78,0 @@ |
No alert changes
Improved metrics
- Dependency count
- decreased by-33.33%
2
- Number of package files
- increased by25%
5
- Number of lines in readme file
- increased by9.86%
78
Worsened metrics
- Total package byte prevSize
- decreased by-5.37%
14427
- Lines of code
- decreased by-6.64%
253
Dependency changes
+ Addedmakeup-active-descendant@0.4.1(transitive)
+ Addedmakeup-exit-emitter@0.3.1(transitive)
+ Addedmakeup-expander@0.9.1(transitive)
+ Addedmakeup-focusables@0.2.0(transitive)
+ Addedmakeup-key-emitter@0.2.0(transitive)
+ Addedmakeup-listbox@0.1.0(transitive)
+ Addedmakeup-navigation-emitter@0.4.1(transitive)
+ Addedmakeup-next-id@0.3.0(transitive)
+ Addedmakeup-prevent-scroll-keys@0.1.1(transitive)
- Removedcustom-event@^1
- Removedcustom-event@1.0.1(transitive)
- Removedmakeup-active-descendant@0.3.9(transitive)
- Removedmakeup-exit-emitter@0.2.60.5.3(transitive)
- Removedmakeup-expander@0.8.7(transitive)
- Removedmakeup-focusables@0.4.4(transitive)
- Removedmakeup-key-emitter@0.1.3(transitive)
- Removedmakeup-listbox@0.0.2(transitive)
- Removedmakeup-navigation-emitter@0.3.8(transitive)
- Removedmakeup-next-id@0.1.30.5.3(transitive)
- Removedmakeup-prevent-scroll-keys@0.0.4(transitive)
- Removednanoid@2.1.11(transitive)
- Removednodelist-foreach-polyfill@1.2.0(transitive)
Updatedmakeup-expander@~0.9.0
Updatedmakeup-listbox@~0.1.0