diff --git a/docs-build/js/advanced/index.js b/docs-build/js/advanced/index.js index f3290d0..72fb72e 100644 --- a/docs-build/js/advanced/index.js +++ b/docs-build/js/advanced/index.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import Advanced1 from './advanced-1'; import Advanced2 from './advanced-2'; +import NestedMenus from './nested-menus'; // Need a separate vue app for each of these so we can render the markdown properly. new Vue({ @@ -14,3 +15,9 @@ new Vue({ Advanced2, }, }).$mount('#advanced-2-app'); + +new Vue({ + components: { + NestedMenus, + }, +}).$mount('#nested-menus'); diff --git a/docs-build/js/nested-menus.vue b/docs-build/js/advanced/nested-menus.vue similarity index 75% rename from docs-build/js/nested-menus.vue rename to docs-build/js/advanced/nested-menus.vue index 1901432..4bd9b9f 100644 --- a/docs-build/js/nested-menus.vue +++ b/docs-build/js/advanced/nested-menus.vue @@ -10,9 +10,7 @@ :key="index" @contextmenu.prevent="$refs.menu.open" > -
+
@@ -53,28 +51,28 @@ diff --git a/docs-build/js/index.js b/docs-build/js/index.js index bc0fc58..4ea83d2 100644 --- a/docs-build/js/index.js +++ b/docs-build/js/index.js @@ -1,15 +1,12 @@ import Vue from 'vue'; import BasicUsage from './basic-usage'; -import NestedMenus from './nested-menus'; import CloseOnClick from './close-on-click'; import CloseOnScroll from './close-on-scroll'; new Vue({ components: { BasicUsage, - - NestedMenus, CloseOnClick, CloseOnScroll, }, diff --git a/docs/demos/advanced.md b/docs/demos/advanced.md index 8fa8e9c..419e866 100644 --- a/docs/demos/advanced.md +++ b/docs/demos/advanced.md @@ -111,6 +111,10 @@ export default { ## Demo 2 +{.tip} +> Right click on each of the colors to have a context menu appear to allow you do add or +> remove the color from the array of selected colors. +
@@ -211,4 +215,93 @@ export default { [Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-2.vue) +## Nested Menus + +
+ +
+ +```html + + + +``` + +[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/nested-menus.vue) + diff --git a/docs/scripts/vue-context-advanced-demos.js b/docs/scripts/vue-context-advanced-demos.js index 897135e..2dbddf1 100644 --- a/docs/scripts/vue-context-advanced-demos.js +++ b/docs/scripts/vue-context-advanced-demos.js @@ -255,6 +255,8 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _advanced_1__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./advanced-1 */ "./js/advanced/advanced-1.vue"); /* harmony import */ var _advanced_2__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./advanced-2 */ "./js/advanced/advanced-2.vue"); +/* harmony import */ var _nested_menus__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./nested-menus */ "./js/advanced/nested-menus.vue"); + // Need a separate vue app for each of these so we can render the markdown properly. @@ -269,6 +271,80 @@ new vue__WEBPACK_IMPORTED_MODULE_0___default.a({ Advanced2: _advanced_2__WEBPACK_IMPORTED_MODULE_2__["default"] } }).$mount('#advanced-2-app'); +new vue__WEBPACK_IMPORTED_MODULE_0___default.a({ + components: { + NestedMenus: _nested_menus__WEBPACK_IMPORTED_MODULE_3__["default"] + } +}).$mount('#nested-menus'); + +/***/ }), + +/***/ "./js/advanced/nested-menus.vue": +/*!**************************************!*\ + !*** ./js/advanced/nested-menus.vue ***! + \**************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _nested_menus_vue_vue_type_template_id_670e4233___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./nested-menus.vue?vue&type=template&id=670e4233& */ "./js/advanced/nested-menus.vue?vue&type=template&id=670e4233&"); +/* harmony import */ var _nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./nested-menus.vue?vue&type=script&lang=js& */ "./js/advanced/nested-menus.vue?vue&type=script&lang=js&"); +/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); + + + + + +/* normalize component */ + +var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( + _nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"], + _nested_menus_vue_vue_type_template_id_670e4233___WEBPACK_IMPORTED_MODULE_0__["render"], + _nested_menus_vue_vue_type_template_id_670e4233___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], + false, + null, + null, + null + +) + +/* hot reload */ +if (false) { var api; } +component.options.__file = "js/advanced/nested-menus.vue" +/* harmony default export */ __webpack_exports__["default"] = (component.exports); + +/***/ }), + +/***/ "./js/advanced/nested-menus.vue?vue&type=script&lang=js&": +/*!***************************************************************!*\ + !*** ./js/advanced/nested-menus.vue?vue&type=script&lang=js& ***! + \***************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/babel-loader/lib??ref--4-0!../../node_modules/vue-loader/lib??vue-loader-options!./nested-menus.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced/nested-menus.vue?vue&type=script&lang=js&"); +/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); + +/***/ }), + +/***/ "./js/advanced/nested-menus.vue?vue&type=template&id=670e4233&": +/*!*********************************************************************!*\ + !*** ./js/advanced/nested-menus.vue?vue&type=template&id=670e4233& ***! + \*********************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_template_id_670e4233___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib??vue-loader-options!./nested-menus.vue?vue&type=template&id=670e4233& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced/nested-menus.vue?vue&type=template&id=670e4233&"); +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_template_id_670e4233___WEBPACK_IMPORTED_MODULE_0__["render"]; }); + +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_template_id_670e4233___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); + + /***/ }), @@ -455,6 +531,90 @@ __webpack_require__.r(__webpack_exports__); /***/ }), +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced/nested-menus.vue?vue&type=script&lang=js&": +/*!***********************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced/nested-menus.vue?vue&type=script&lang=js& ***! + \***********************************************************************************************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var vue_context__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-context */ "./node_modules/vue-context/src/js/index.js"); +/* harmony import */ var vue_context_src_sass_vue_context_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-context/src/sass/vue-context.scss */ "./node_modules/vue-context/src/sass/vue-context.scss"); +/* harmony import */ var vue_context_src_sass_vue_context_scss__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue_context_src_sass_vue_context_scss__WEBPACK_IMPORTED_MODULE_1__); +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// + + +/* harmony default export */ __webpack_exports__["default"] = ({ + components: { + VueContext: vue_context__WEBPACK_IMPORTED_MODULE_0__["default"] + }, + data: function data() { + return { + items: ['Cras justo odio', 'Dapibus ac facilisis in', 'Morbi leo risus', 'Porta ac consectetur ac', 'Vestibulum at eros'] + }; + }, + methods: { + alertText: function alertText(text) { + alert("You clicked: ".concat(text)); + } + } +}); + +/***/ }), + /***/ "./node_modules/css-loader/index.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-context/src/sass/vue-context.scss": /*!***********************************************************************************************************************************************************************************!*\ !*** ./node_modules/css-loader!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./node_modules/vue-context/src/sass/vue-context.scss ***! @@ -2547,6 +2707,198 @@ render._withStripped = true +/***/ }), + +/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced/nested-menus.vue?vue&type=template&id=670e4233&": +/*!***************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced/nested-menus.vue?vue&type=template&id=670e4233& ***! + \***************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function() { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c( + "div", + [ + _c( + "div", + { staticClass: "bg-white shadow overflow-hidden sm:rounded-md" }, + [ + _c("ul", [ + _c( + "li", + _vm._l(_vm.items, function(item, index) { + return _c( + "a", + { + key: index, + staticClass: + "block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out", + class: { "border-t border-gray-200": index > 0 }, + attrs: { href: "#" }, + on: { + contextmenu: function($event) { + $event.preventDefault() + return _vm.$refs.menu.open($event) + } + } + }, + [ + _c( + "div", + { staticClass: "flex items-center px-4 py-4 sm:px-6" }, + [ + _c( + "div", + { + staticClass: + "min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4" + }, + [ + _c("div", { + staticClass: + "text-sm leading-5 font-medium text-gray-600 truncate", + domProps: { textContent: _vm._s(item) } + }) + ] + ) + ] + ) + ] + ) + }), + 0 + ) + ]) + ] + ), + _vm._v(" "), + _c("vue-context", { ref: "menu" }, [ + _c("li", [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.innerText) + } + } + }, + [_vm._v("Not nested")] + ) + ]), + _vm._v(" "), + _c("li", { staticClass: "v-context__sub" }, [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.innerText) + } + } + }, + [_vm._v("Has sub menu")] + ), + _vm._v(" "), + _c("ul", { staticClass: "v-context" }, [ + _c("li", [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.innerText) + } + } + }, + [_vm._v("Nested child")] + ) + ]), + _vm._v(" "), + _c("li", { staticClass: "v-context__sub" }, [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.innerText) + } + } + }, + [_vm._v("Another nested menu")] + ), + _vm._v(" "), + _c("ul", { staticClass: "v-context" }, [ + _c("li", [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.innerText) + } + } + }, + [_vm._v("Another level deep")] + ) + ]), + _vm._v(" "), + _c("li", [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.innerText) + } + } + }, + [_vm._v("There is no limit")] + ) + ]) + ]) + ]) + ]) + ]), + _vm._v(" "), + _c("li", [ + _c( + "a", + { + on: { + click: function($event) { + $event.preventDefault() + return _vm.alertText($event.target.text) + } + } + }, + [_vm._v("Also not nested")] + ) + ]) + ]) + ], + 1 + ) +} +var staticRenderFns = [] +render._withStripped = true + + + /***/ }), /***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js": diff --git a/docs/scripts/vue-context-demos.js b/docs/scripts/vue-context-demos.js index c3376fa..3d14e26 100644 --- a/docs/scripts/vue-context-demos.js +++ b/docs/scripts/vue-context-demos.js @@ -305,10 +305,8 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.js"); /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _basic_usage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./basic-usage */ "./js/basic-usage.vue"); -/* harmony import */ var _nested_menus__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./nested-menus */ "./js/nested-menus.vue"); -/* harmony import */ var _close_on_click__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./close-on-click */ "./js/close-on-click.vue"); -/* harmony import */ var _close_on_scroll__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./close-on-scroll */ "./js/close-on-scroll.vue"); - +/* harmony import */ var _close_on_click__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./close-on-click */ "./js/close-on-click.vue"); +/* harmony import */ var _close_on_scroll__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./close-on-scroll */ "./js/close-on-scroll.vue"); @@ -316,81 +314,11 @@ __webpack_require__.r(__webpack_exports__); new vue__WEBPACK_IMPORTED_MODULE_0___default.a({ components: { BasicUsage: _basic_usage__WEBPACK_IMPORTED_MODULE_1__["default"], - NestedMenus: _nested_menus__WEBPACK_IMPORTED_MODULE_2__["default"], - CloseOnClick: _close_on_click__WEBPACK_IMPORTED_MODULE_3__["default"], - CloseOnScroll: _close_on_scroll__WEBPACK_IMPORTED_MODULE_4__["default"] + CloseOnClick: _close_on_click__WEBPACK_IMPORTED_MODULE_2__["default"], + CloseOnScroll: _close_on_scroll__WEBPACK_IMPORTED_MODULE_3__["default"] } }).$mount('#app'); -/***/ }), - -/***/ "./js/nested-menus.vue": -/*!*****************************!*\ - !*** ./js/nested-menus.vue ***! - \*****************************/ -/*! exports provided: default */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _nested_menus_vue_vue_type_template_id_575462f4___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./nested-menus.vue?vue&type=template&id=575462f4& */ "./js/nested-menus.vue?vue&type=template&id=575462f4&"); -/* harmony import */ var _nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./nested-menus.vue?vue&type=script&lang=js& */ "./js/nested-menus.vue?vue&type=script&lang=js&"); -/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); - - - - - -/* normalize component */ - -var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( - _nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"], - _nested_menus_vue_vue_type_template_id_575462f4___WEBPACK_IMPORTED_MODULE_0__["render"], - _nested_menus_vue_vue_type_template_id_575462f4___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], - false, - null, - null, - null - -) - -/* hot reload */ -if (false) { var api; } -component.options.__file = "js/nested-menus.vue" -/* harmony default export */ __webpack_exports__["default"] = (component.exports); - -/***/ }), - -/***/ "./js/nested-menus.vue?vue&type=script&lang=js&": -/*!******************************************************!*\ - !*** ./js/nested-menus.vue?vue&type=script&lang=js& ***! - \******************************************************/ -/*! exports provided: default */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/babel-loader/lib??ref--4-0!../node_modules/vue-loader/lib??vue-loader-options!./nested-menus.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/nested-menus.vue?vue&type=script&lang=js&"); -/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); - -/***/ }), - -/***/ "./js/nested-menus.vue?vue&type=template&id=575462f4&": -/*!************************************************************!*\ - !*** ./js/nested-menus.vue?vue&type=template&id=575462f4& ***! - \************************************************************/ -/*! exports provided: render, staticRenderFns */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_template_id_575462f4___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./nested-menus.vue?vue&type=template&id=575462f4& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/nested-menus.vue?vue&type=template&id=575462f4&"); -/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_template_id_575462f4___WEBPACK_IMPORTED_MODULE_0__["render"]; }); - -/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_nested_menus_vue_vue_type_template_id_575462f4___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); - - - /***/ }), /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/basic-usage.vue?vue&type=script&lang=js&": @@ -612,92 +540,6 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/nested-menus.vue?vue&type=script&lang=js&": -/*!**************************************************************************************************************************************************!*\ - !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./js/nested-menus.vue?vue&type=script&lang=js& ***! - \**************************************************************************************************************************************************/ -/*! exports provided: default */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var vue_context__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-context */ "./node_modules/vue-context/src/js/index.js"); -/* harmony import */ var vue_context_src_sass_vue_context_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-context/src/sass/vue-context.scss */ "./node_modules/vue-context/src/sass/vue-context.scss"); -/* harmony import */ var vue_context_src_sass_vue_context_scss__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue_context_src_sass_vue_context_scss__WEBPACK_IMPORTED_MODULE_1__); -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - - -/* harmony default export */ __webpack_exports__["default"] = ({ - components: { - VueContext: vue_context__WEBPACK_IMPORTED_MODULE_0__["default"] - }, - data: function data() { - return { - items: ['Cras justo odio', 'Dapibus ac facilisis in', 'Morbi leo risus', 'Porta ac consectetur ac', 'Vestibulum at eros'] - }; - }, - methods: { - alertText: function alertText(text) { - alert("You clicked: ".concat(text)); - } - } -}); - -/***/ }), - /***/ "./node_modules/css-loader/index.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-context/src/sass/vue-context.scss": /*!***********************************************************************************************************************************************************************************!*\ !*** ./node_modules/css-loader!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./node_modules/vue-context/src/sass/vue-context.scss ***! @@ -2908,204 +2750,6 @@ render._withStripped = true -/***/ }), - -/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/nested-menus.vue?vue&type=template&id=575462f4&": -/*!******************************************************************************************************************************************************************************************!*\ - !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./js/nested-menus.vue?vue&type=template&id=575462f4& ***! - \******************************************************************************************************************************************************************************************/ -/*! exports provided: render, staticRenderFns */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); -var render = function() { - var _vm = this - var _h = _vm.$createElement - var _c = _vm._self._c || _h - return _c( - "div", - [ - _c( - "div", - { staticClass: "bg-white shadow overflow-hidden sm:rounded-md" }, - [ - _c("ul", [ - _c( - "li", - _vm._l(_vm.items, function(item, index) { - return _c( - "a", - { - key: index, - staticClass: - "block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out", - class: { "border-t border-gray-200": index > 0 }, - attrs: { href: "#" }, - on: { - contextmenu: function($event) { - $event.preventDefault() - return _vm.$refs.menu.open($event) - } - } - }, - [ - _c( - "div", - { - staticClass: "flex items-center px-4 py-4 sm:px-6", - class: { - "pt-0": index === 0, - "pb-0": index + 1 === _vm.items.length - } - }, - [ - _c( - "div", - { - staticClass: - "min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4" - }, - [ - _c("div", { - staticClass: - "text-sm leading-5 font-medium text-gray-600 truncate", - domProps: { textContent: _vm._s(item) } - }) - ] - ) - ] - ) - ] - ) - }), - 0 - ) - ]) - ] - ), - _vm._v(" "), - _c("vue-context", { ref: "menu" }, [ - _c("li", [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.innerText) - } - } - }, - [_vm._v("Not nested")] - ) - ]), - _vm._v(" "), - _c("li", { staticClass: "v-context__sub" }, [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.innerText) - } - } - }, - [_vm._v("Has sub menu")] - ), - _vm._v(" "), - _c("ul", { staticClass: "v-context" }, [ - _c("li", [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.innerText) - } - } - }, - [_vm._v("Nested child")] - ) - ]), - _vm._v(" "), - _c("li", { staticClass: "v-context__sub" }, [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.innerText) - } - } - }, - [_vm._v("Another nested menu")] - ), - _vm._v(" "), - _c("ul", { staticClass: "v-context" }, [ - _c("li", [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.innerText) - } - } - }, - [_vm._v("Another level deep")] - ) - ]), - _vm._v(" "), - _c("li", [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.innerText) - } - } - }, - [_vm._v("There is no limit")] - ) - ]) - ]) - ]) - ]) - ]), - _vm._v(" "), - _c("li", [ - _c( - "a", - { - on: { - click: function($event) { - $event.preventDefault() - return _vm.alertText($event.target.text) - } - } - }, - [_vm._v("Also not nested")] - ) - ]) - ]) - ], - 1 - ) -} -var staticRenderFns = [] -render._withStripped = true - - - /***/ }), /***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":