mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-05-17 04:19:36 +03:00
Code Activity

wip

Browse Source
This commit is contained in:
rawilk
2020-08-30 20:19:17 -05:00
parent 633eb31afd
commit 19af14b9fc
6 changed files with 478 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-build/js/advanced/index.js
+7
View File
@@ -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');
docs-build/js/nested-menus.vue → docs-build/js/advanced/nested-menus.vue
+22 -24
View File
@@ -10,9 +10,7 @@
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
@@ -53,28 +51,28 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
alertText(text) {
alert(`You clicked: ${text}`);
},
methods: {
alertText(text) {
alert(`You clicked: ${text}`);
}
}
};
},
};
</script>
docs-build/js/index.js
-3
View File
@@ -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,
},
docs/demos/advanced.md
+93
View File
@@ -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.
<div id="advanced-2-app">
<div style="margin-bottom: 1rem;">
<advanced-2></advanced-2>
@@ -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
<div id="nested-app" style="margin-bottom: 1rem;">
<nested-menus></nested-menus>
</div>
```html
<template>
<div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<li>
<a href="#"
class="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 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu">
<li>
<a @click.prevent="alertText($event.target.innerText)">Not nested</a>
</li>
<li class="v-context__sub">
<a @click.prevent="alertText($event.target.innerText)">Has sub menu</a>
<ul class="v-context">
<li>
<a @click.prevent="alertText($event.target.innerText)">Nested child</a>
</li>
<li class="v-context__sub">
<a @click.prevent="alertText($event.target.innerText)">Another nested menu</a>
<ul class="v-context">
<li>
<a @click.prevent="alertText($event.target.innerText)">Another level deep</a>
</li>
<li>
<a @click.prevent="alertText($event.target.innerText)">There is no limit</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a @click.prevent="alertText($event.target.text)">Also not nested</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
alertText(text) {
alert(`You clicked: ${text}`);
},
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/nested-menus.vue)
<script src="../scripts/vue-context-advanced-demos.js"></script>
docs/scripts/vue-context-advanced-demos.js
+352
View File
@@ -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":
docs/scripts/vue-context-demos.js
+4 -360
View File
@@ -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":