Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
makeup-listbox
Advanced tools
makeup-listbox - npm Package Compare versions
Comparing version 0.0.2 to 0.1.0
@@ -5,8 +5,14 @@ "use strict"; | ||
| function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
| function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
| function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
| function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
| function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
| 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"); } } | ||
@@ -25,8 +31,2 @@ | ||
| */ | ||
| // requires CustomEvent polyfill for IE | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent | ||
| var CustomEvent = require('custom-event'); | ||
| var findIndex = require('core-js-pure/features/array/find-index'); | ||
| var ActiveDescendant = require('makeup-active-descendant'); | ||
@@ -58,3 +58,3 @@ | ||
| this._options = _extends({}, defaultOptions, selectedOptions); | ||
| this._options = Object.assign({}, defaultOptions, selectedOptions); | ||
| this.el = widgetEl; // in cases such as combobox, the active-descendant logic is controlled by a parent widget | ||
@@ -149,3 +149,3 @@ | ||
| get: function get() { | ||
| return findIndex(Array.prototype.slice.call(this.items), function (el) { | ||
| return _toConsumableArray(this.items).findIndex(function (el) { | ||
| return el.getAttribute('aria-selected') === 'true'; | ||
@@ -315,2 +315,2 @@ }); | ||
| return index > -1 && index < size; | ||
| } | ||
| } |
| { | ||
| "name": "makeup-listbox", | ||
| "version": "0.0.2", | ||
| "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-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-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": { | ||
@@ -60,5 +47,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==" | ||
| }, | ||
@@ -69,9 +56,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", | ||
| "description": "A JavaScript class representing an ARIA listbox", | ||
| "version": "0.0.2", | ||
| "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", | ||
| "scripts": { | ||
| "compile": "babel src/index.js --out-file dist/index.js" | ||
| "compile": "babel src --out-dir dist" | ||
| }, | ||
| "dependencies": { | ||
| "custom-event": "^1", | ||
| "makeup-prevent-scroll-keys": "~0.0.4", | ||
| "makeup-active-descendant": "~0.3.9" | ||
| "makeup-prevent-scroll-keys": "~0.1.0", | ||
| "makeup-active-descendant": "~0.4.0" | ||
| }, | ||
| "files": [ | ||
| "browser.json", | ||
| "dist/index.js", | ||
@@ -20,0 +20,0 @@ "package-lock.json" |
@@ -5,4 +5,8 @@ # makeup-listbox | ||
| ## Example | ||
| The listbox class is consumed by the following modules: [listbox-button](../makeup-listbox-button)</a>, [combobox](../makeup-combobox). | ||
| [View Demo](https://makeup.github.io/makeup-js/makeup-listbox/index.html). | ||
| ## HTML | ||
| The following markup structure and classnames are required. Any SVG icons can be used. | ||
@@ -17,3 +21,3 @@ | ||
| <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> | ||
@@ -26,3 +30,3 @@ </svg> | ||
| <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> | ||
@@ -35,3 +39,3 @@ </svg> | ||
| <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> | ||
@@ -44,10 +48,17 @@ </svg> | ||
| Style: | ||
| ## CSS | ||
| No CSS is provided. However, the class is fully compatible with [eBay Skin](https://ebay.github.io/skin/#listbox). | ||
| Script: | ||
| ## JavaScript | ||
| ```js | ||
| const Listbox = require('makeup-listbox'); | ||
| document.querySelectorAll('.listbox').forEach(function(el, i) { | ||
| const widget = new Listbox(el, config); | ||
| el.addEventListener('makeup-listbox-change', function(e) { | ||
| console.log(e.type, e.detail); | ||
| }); | ||
| }); | ||
@@ -60,6 +71,4 @@ ``` | ||
| ### customElementMode | ||
| todo | ||
| Set to true if using the class as the model for a custom element (aka Web Component). | ||
| ## Events | ||
@@ -66,0 +75,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-33.33%
2
- Number of package files
- increased by25%
5
- Number of lines in readme file
- increased by13.43%
76
Worsened metrics
- Total package byte prevSize
- decreased by-1.64%
17116
- Lines of code
- decreased by-4.85%
314
Dependency changes
+ Addedmakeup-active-descendant@0.4.1(transitive)
+ Addedmakeup-exit-emitter@0.3.1(transitive)
+ Addedmakeup-key-emitter@0.2.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.6(transitive)
- Removedmakeup-key-emitter@0.1.3(transitive)
- Removedmakeup-navigation-emitter@0.3.8(transitive)
- Removedmakeup-next-id@0.1.3(transitive)
- Removedmakeup-prevent-scroll-keys@0.0.4(transitive)
- Removednanoid@2.1.11(transitive)
- Removednodelist-foreach-polyfill@1.2.0(transitive)