Release/v5 (#43)

Author: rawilk

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .idea
 npm-debug.log*
-**/mix-manifest.json
+**/mix-manifest.json
+test/js/dist/

.npmignore

@@ -1,5 +1,3 @@
-docs/
-src/
 test/
 build/
 .idea

CHANGELOG.md

@@ -2,42 +2,60 @@
 
 All notable changes to this project will be documented here.
 
+<a name="5.0.0"></a>
+## [5.0.0](https://github.com/rawilk/vue-context/releases/tag/5.0.0)
+
+Released 2019-11-14
+
+### Added
+- Add default export in entry point ([#41](https://github.com/rawilk/vue-context/issues/41)).
+- Add support for nested context menus ([#37](https://github.com/rawilk/vue-context/pull/37)).
+
+### Changes
+- Update entry point to source ([#33](https://github.com/rawilk/vue-context/issues/33)).
+- No longer build component with webpack ([#33](https://github.com/rawilk/vue-context/issues/33)).
+- Component source is available through npm now, including the sass files.
+
+### Release notes
+- Even though there shouldn't be any breaking changes in this release, it's a major release because
+breaking changes were introduced in version 4.1.0, which should have been a major release instead.
+
 <a name="4.1.1"></a>
 ## [4.1.1](https://github.com/rawilk/vue-context/releases/tag/4.1.1)
 
 Released 2019-10-20
 
-### Bug Fixes 4.1.1
+### Bug Fixes
 - Fix bug of "Unknown custom element" ([#40](https://github.com/rawilk/vue-context/issues/40)).
 
 <a name="4.1.0"></a>
 ## [4.1.0](https://github.com/rawilk/vue-context/releases/tag/4.0.3)
 
 Released 2019-10-11
 
-### Breaking Changes 4.1.0
+### Breaking Changes
 - Move menu styles from js to its own stylesheet ([#36](https://github.com/rawilk/vue-context/issues/36))
 
-### Changes 4.1.0
+### Changes
 - Remove core-js as a dependency in favor of local polyfills for a smaller build size ([#33](https://github.com/rawilk/vue-context/issues/33))
 
 <a name="4.0.3"></a>
 ## [4.0.3](https://github.com/rawilk/vue-context/releases/tag/4.0.3)
 
 Released 2019-07-28
 
-### Bug Fixes 4.0.3
+### Bug Fixes
 - Make `localItemSelector` reactive to changes from `itemSelector` prop ([#30](https://github.com/rawilk/vue-context/issues/30)).
 
-### Updates 4.0.3
+### Updates
 - Update dev dependencies
 
 <a name="4.0.2"></a>
 ## [4.0.2](https://github.com/rawilk/vue-context/releases/tag/4.0.2)
 
 Released 2019-06-22
 
-### Bug Fixes 4.0.2
+### Bug Fixes
 - Fix menu item width issues ([#26](https://github.com/rawilk/vue-context/issues/26)).
 - Remove outline from menu and menu items when given focus ([#26](https://github.com/rawilk/vue-context/issues/26)).
 
@@ -46,25 +64,25 @@ Released 2019-06-22
 
 Released 2019-06-03
 
-### Bug Fixes 4.0.1
+### Bug Fixes
 - Always emit the close event on click. See issue [#23](https://github.com/rawilk/vue-context/issues/23) 
 
 <a name="4.0.0"></a>
 ## [4.0.0](https://github.com/rawilk/vue-context/releases/tag/4.0.0)
 
 Released 2019-05-18
 
-### Added 4.0.0
+### Added
 - Added support for keyboard navigation (up and down arrows).
 - Added ability to close menu on esc.
 - Added `lazy` prop as an alternative to `v-show`.
 - Added `tag` prop to specify menu tag (defaults to `<ul>`).
 
-### Changes 4.0.0
+### Changes
 - Default menu tag is now `<ul>` and menu is now the top-level element.
 - Changed how the menu is styled.
 
-### Updates 4.0.0
+### Updates
 - Updated build process and project structure.
 - Ran `npm audit fix` to fix vulnerabilities found from dependencies.
 
@@ -73,15 +91,15 @@ Released 2019-05-18
 
 Released 2019-04-05
 
-### Bug Fixes 3.4.2
+### Bug Fixes
 - Only add scroll event listener on `closeOnScroll` prop value change if the menu is open.
 
 <a name="3.4.1"></a>
 ## [3.4.1](https://github.com/rawilk/vue-context/releases/tag/3.4.1)
 
 Released 2019-04-03
 
-### Updates 3.4.1
+### Updates
 - **Scroll Listener:** Only attach the close scroll event listener when opened and immediately remove it when menu is closed
 to prevent it being called unnecessarily. 
 - **Dependencies:** Removed Vue as a dependency as it never really was one since v3.0.0.
@@ -92,42 +110,42 @@ to prevent it being called unnecessarily.
 
 Released 2018-11-19
 
-### Bug fixes 3.4.0
+### Bug fixes
 - **Close event:** only emit the event if menu is actually open (fixes [#13](https://github.com/rawilk/vue-context/issues/13))
 
 <a name="3.3.1"></a>
 ## [3.3.1](https://github.com/rawilk/vue-context/releases/tag/3.3.1)
 
 Released 2018-10-23
 
-### Changes 3.3.1
+### Changes
 - Context menu now closes via [clickaway](https://github.com/simplesmiler/vue-clickaway) instead of a blur event. Credit: [robjbrain](https://github.com/robjbrain)
 
-### Updates 3.3.1
+### Updates
 - Updated vue and other dev dependencies.
 
 <a name="3.3.0"></a>
 ## [3.3.0](https://github.com/rawilk/vue-context/releases/tag/3.3.0)
 
 Released 2018-10-15
 
-### Features 3.3.0
+### Features
 - **Events:** both open and close events are now emitted by the component. ([#10](https://github.com/rawilk/vue-context/issues/10))
 
 <a name="3.2.0"></a>
 ## [3.2.0](https://github.com/rawilk/vue-context/releases/tag/3.2.0)
 
 Released 2018-09-12
 
-### Features 3.2.0
+### Features
 - **Close on click prop:** added a prop to prevent closing the context menu on click. ([#8](https://github.com/rawilk/vue-context/issues/8))
 
 <a name="3.1.1"></a>
 ## [3.1.1](https://github.com/rawilk/vue-context/releases/tag/3.1.1)
 
 Released 2018-06-23
 
-### Updates 3.1.1
+### Updates
 - Updated README.md
 - Added code comments
 
@@ -136,46 +154,46 @@ Released 2018-06-23
 
 Released 2018-05-29
 
-### Features 3.1.0
+### Features
 - **Scroll prop:** added a prop to close the context menu automatically on window scroll. ([#2](https://github.com/rawilk/vue-context/issues/2))
 
 <a name="3.0.2"></a>
 ## [3.0.2](https://github.com/rawilk/vue-context/releases/tag/3.0.2)
 
 Released 2018-05-29
 
-### Updates 3.0.2
+### Updates
 - Updated documentation
 
-### Added 3.0.2
+### Added
 - Added [demos](https://vue-context.randallwilk.com) for the component.
 
 <a name="3.0.0"></a>
 ## [3.0.0](https://github.com/rawilk/vue-context/releases/tag/3.0.0)
 
 Released 2018-05-26
 
-### Breaking changes 3.0.0
+### Breaking changes
 - Changed slot scope definition from `userData` to just `data`.
 - Component gets imported as `{ VueContext }` instead of `VContext` now.
 
-### Updates 3.0.0
+### Updates
 - Updated dependencies
 - Updated documentation
 
-### Changes 3.0.0
+### Changes
 - Changed code structure and build process.
 
 <a name="2.0.1"></a>
 ## [2.0.1](https://github.com/rawilk/vue-context/releases/tag/2.0.1)
 
 Released 2017-08-18
 
-### Added 2.0.1
+### Added
 - License file
 - Changelog file
 
-### Removed 2.0.1
+### Removed
 - Removed bottom border from context menu line items.
 
 <a name="2.0.0"></a>

README.md

@@ -75,12 +75,22 @@ Next add an element to the page that will trigger the context menu to appear, an
 
 ```bash
 @import '~vue-context/dist/css/vue-context.css';
+
+// Or
+@import '~vue-context/src/sass/vue-context';
 ```
 
 ## Documentation/Demo
 
 For full documentation and demos, go here: https://vue-context.com/docs
 
+## Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
+
+- [rawilk](https://github.com/rawilk)
+- [wol-soft](https://github.com/wol-soft)
+
 ## License
 
 `vue-context` uses the MIT License (MIT). Please see the [license file](https://github.com/rawilk/vue-context/blob/master/LICENSE) for more information.

build/webpack-styles.mix.js

@@ -1,14 +1,5 @@
 const mix = require('laravel-mix');
 
-const inProduction = mix.inProduction();
-
 mix
-    .setPublicPath('dist/js')
-    .js('src/js/index.js', 'vue-context.js')
-    .sourceMaps(! inProduction)
-    .webpackConfig({
-        output: {
-            libraryTarget: 'umd',
-            umdNamedDefine: true
-        }
-    });
+    .setPublicPath('dist/css')
+    .sass('src/sass/vue-context.scss', 'vue-context.css');

build/webpack.mix.js

@@ -2,13 +2,12 @@
   "name": "vue-context",
   "version": "4.1.1",
   "description": "A simple vue context menu component.",
-  "main": "dist/js/vue-context.js",
+  "main": "src/js/index.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=build/webpack.mix.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "dev-test": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=build/webpack-test.mix.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch-test": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=build/webpack-test.mix.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --env.mixfile=build/webpack.mix.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "styles": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --env.mixfile=build/webpack-styles.mix.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --env.mixfile=build/webpack.mix.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "keywords": [
     "Vue",

dist/css/vue-context.css

@@ -1 +1,2 @@
+export { default } from './vue-context';
 export { default as VueContext } from './vue-context';

dist/js/vue-context.js

@@ -17,7 +17,9 @@ export const isArray = Array.isArray;
 
 export const keyCodes = {
     ESC: 27,
+    LEFT: 37,
     UP: 38,
+    RIGHT: 39,
     DOWN: 40
 };
 
@@ -51,7 +53,7 @@ export const filterVisible = elements => (elements || []).filter(isVisible);
 
 // Return the Bounding Client Rect of an element
 // Returns `null` if not an element
-const getBCR = el => (isElement(el) ? el.getBoundingClientRect() : null);
+export const getBCR = el => (isElement(el) ? el.getBoundingClientRect() : null);
 
 // Determine if an element is an HTML element
 const isElement = el => Boolean(el && el.nodeType === Node.ELEMENT_NODE);
@@ -81,3 +83,13 @@ export const setAttr = (el, attr, value) => {
         el.setAttribute(attr, value);
     }
 };
+
+export const parentElementByClassName = (element, className) => {
+    let parentElement = element.parentElement;
+
+    while (parentElement !== null && !parentElement.classList.contains(className)) {
+        parentElement = parentElement.parentElement;
+    }
+
+    return parentElement;
+};