mirror of
https://github.com/tenrok/vue-context.git
synced 2026-05-17 04:59:35 +03:00
wip
This commit is contained in:
rawilk
@@ -47,44 +47,44 @@
|
||||
</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';
|
||||
|
||||
const items = [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros'
|
||||
];
|
||||
const items = [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros'
|
||||
];
|
||||
|
||||
export default {
|
||||
components: { VueContext },
|
||||
export default {
|
||||
components: { VueContext },
|
||||
|
||||
computed: {
|
||||
showReset () {
|
||||
return this.items.length < items.length;
|
||||
},
|
||||
computed: {
|
||||
showReset () {
|
||||
return this.items.length < items.length;
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
items: [...items]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
alertName(name) {
|
||||
alert(`You clicked on "${name}"!`);
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
items: [...items]
|
||||
};
|
||||
remove(index) {
|
||||
this.$delete(this.items, index);
|
||||
},
|
||||
|
||||
methods: {
|
||||
alertName(name) {
|
||||
alert(`You clicked on "${name}"!`);
|
||||
},
|
||||
|
||||
remove(index) {
|
||||
this.$delete(this.items, index);
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.items = [...items];
|
||||
},
|
||||
reset() {
|
||||
this.items = [...items];
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
import Vue from 'vue';
|
||||
import Advanced1 from './advanced-1';
|
||||
import Advanced2 from './advanced-2';
|
||||
|
||||
// Need a separate vue app for each of these so we can render the markdown properly.
|
||||
new Vue({
|
||||
components: {
|
||||
Advanced1,
|
||||
},
|
||||
}).$mount('#advanced-1-app');
|
||||
|
||||
new Vue({
|
||||
components: {
|
||||
Advanced2,
|
||||
},
|
||||
}).$mount('#advanced-2-app');
|
||||
@@ -1,7 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
import BasicUsage from './basic-usage';
|
||||
import Advanced1 from './advanced-1';
|
||||
import Advanced2 from './advanced-2';
|
||||
|
||||
import NestedMenus from './nested-menus';
|
||||
import CloseOnClick from './close-on-click';
|
||||
import CloseOnScroll from './close-on-scroll';
|
||||
@@ -9,8 +8,7 @@ import CloseOnScroll from './close-on-scroll';
|
||||
new Vue({
|
||||
components: {
|
||||
BasicUsage,
|
||||
Advanced1,
|
||||
Advanced2,
|
||||
|
||||
NestedMenus,
|
||||
CloseOnClick,
|
||||
CloseOnScroll,
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
mix.js('js/index.js', 'dist/vue-context-demos.js')
|
||||
.copy('dist/vue-context-demos.js', __dirname + '/../docs/scripts');
|
||||
mix
|
||||
.js('js/index.js', 'dist/vue-context-demos.js')
|
||||
.js('js/advanced/index.js', 'dist/vue-context-advanced-demos.js')
|
||||
|
||||
.copy('dist/vue-context-demos.js', __dirname + '/../docs/scripts')
|
||||
.copy('dist/vue-context-advanced-demos.js', __dirname + '/../docs/scripts');
|
||||
|
||||
+97
-5
@@ -3,16 +3,108 @@ title: Advanced Demo
|
||||
sort: 2
|
||||
---
|
||||
|
||||
<div id="app">
|
||||
## Demo 1
|
||||
|
||||
{.tip}
|
||||
> Right click on each item to see a more customized context menu appear for each item.
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<advanced-1></advanced-1>
|
||||
<div id="advanced-1-app">
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<advanced-1></advanced-1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul class="demo">
|
||||
<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($event, { name: item, index })"
|
||||
>
|
||||
<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>
|
||||
|
||||
<script src="../scripts/vue-context-demos.js"></script>
|
||||
<div class="my-4 text-right" v-show="showReset">
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150"
|
||||
@click="reset"
|
||||
>
|
||||
Reset Demo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<vue-context ref="menu" v-slot="{ data }">
|
||||
<template v-if="data">
|
||||
<li>
|
||||
<a @click.prevent="alertName(data.name)">
|
||||
Alert name
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click.prevent="remove(data.index)">
|
||||
Delete "{{ data.name }}"
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</vue-context>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueContext from 'vue-context';
|
||||
import 'vue-context/src/sass/vue-context.scss';
|
||||
|
||||
const items = [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros'
|
||||
];
|
||||
|
||||
export default {
|
||||
components: { VueContext },
|
||||
|
||||
computed: {
|
||||
showReset () {
|
||||
return this.items.length < items.length;
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
items: [...items]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
alertName(name) {
|
||||
alert(`You clicked on "${name}"!`);
|
||||
},
|
||||
|
||||
remove(index) {
|
||||
this.$delete(this.items, index);
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.items = [...items];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
<script src="../scripts/vue-context-advanced-demos.js"></script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -86,162 +86,6 @@
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./js/advanced-1.vue":
|
||||
/*!***************************!*\
|
||||
!*** ./js/advanced-1.vue ***!
|
||||
\***************************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _advanced_1_vue_vue_type_template_id_d95475a4___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./advanced-1.vue?vue&type=template&id=d95475a4& */ "./js/advanced-1.vue?vue&type=template&id=d95475a4&");
|
||||
/* harmony import */ var _advanced_1_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./advanced-1.vue?vue&type=script&lang=js& */ "./js/advanced-1.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"])(
|
||||
_advanced_1_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
|
||||
_advanced_1_vue_vue_type_template_id_d95475a4___WEBPACK_IMPORTED_MODULE_0__["render"],
|
||||
_advanced_1_vue_vue_type_template_id_d95475a4___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
|
||||
)
|
||||
|
||||
/* hot reload */
|
||||
if (false) { var api; }
|
||||
component.options.__file = "js/advanced-1.vue"
|
||||
/* harmony default export */ __webpack_exports__["default"] = (component.exports);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/advanced-1.vue?vue&type=script&lang=js&":
|
||||
/*!****************************************************!*\
|
||||
!*** ./js/advanced-1.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_advanced_1_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!./advanced-1.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-1.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_advanced_1_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/advanced-1.vue?vue&type=template&id=d95475a4&":
|
||||
/*!**********************************************************!*\
|
||||
!*** ./js/advanced-1.vue?vue&type=template&id=d95475a4& ***!
|
||||
\**********************************************************/
|
||||
/*! 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_advanced_1_vue_vue_type_template_id_d95475a4___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!./advanced-1.vue?vue&type=template&id=d95475a4& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-1.vue?vue&type=template&id=d95475a4&");
|
||||
/* 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_advanced_1_vue_vue_type_template_id_d95475a4___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_advanced_1_vue_vue_type_template_id_d95475a4___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/advanced-2.vue":
|
||||
/*!***************************!*\
|
||||
!*** ./js/advanced-2.vue ***!
|
||||
\***************************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _advanced_2_vue_vue_type_template_id_d93846a2_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./advanced-2.vue?vue&type=template&id=d93846a2&scoped=true& */ "./js/advanced-2.vue?vue&type=template&id=d93846a2&scoped=true&");
|
||||
/* harmony import */ var _advanced_2_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./advanced-2.vue?vue&type=script&lang=js& */ "./js/advanced-2.vue?vue&type=script&lang=js&");
|
||||
/* empty/unused harmony star reexport *//* harmony import */ var _advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true& */ "./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true&");
|
||||
/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __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_3__["default"])(
|
||||
_advanced_2_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
|
||||
_advanced_2_vue_vue_type_template_id_d93846a2_scoped_true___WEBPACK_IMPORTED_MODULE_0__["render"],
|
||||
_advanced_2_vue_vue_type_template_id_d93846a2_scoped_true___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
|
||||
false,
|
||||
null,
|
||||
"d93846a2",
|
||||
null
|
||||
|
||||
)
|
||||
|
||||
/* hot reload */
|
||||
if (false) { var api; }
|
||||
component.options.__file = "js/advanced-2.vue"
|
||||
/* harmony default export */ __webpack_exports__["default"] = (component.exports);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/advanced-2.vue?vue&type=script&lang=js&":
|
||||
/*!****************************************************!*\
|
||||
!*** ./js/advanced-2.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_advanced_2_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!./advanced-2.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.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_advanced_2_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true&":
|
||||
/*!*************************************************************************************!*\
|
||||
!*** ./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true& ***!
|
||||
\*************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_index_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_sass_loader_dist_cjs_js_ref_6_3_node_modules_vue_loader_lib_index_js_vue_loader_options_advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/style-loader!../node_modules/css-loader!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ref--6-2!../node_modules/sass-loader/dist/cjs.js??ref--6-3!../node_modules/vue-loader/lib??vue-loader-options!./advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true& */ "./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true&");
|
||||
/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_index_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_sass_loader_dist_cjs_js_ref_6_3_node_modules_vue_loader_lib_index_js_vue_loader_options_advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_index_js_node_modules_css_loader_index_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_sass_loader_dist_cjs_js_ref_6_3_node_modules_vue_loader_lib_index_js_vue_loader_options_advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_style_loader_index_js_node_modules_css_loader_index_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_sass_loader_dist_cjs_js_ref_6_3_node_modules_vue_loader_lib_index_js_vue_loader_options_advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_style_loader_index_js_node_modules_css_loader_index_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_sass_loader_dist_cjs_js_ref_6_3_node_modules_vue_loader_lib_index_js_vue_loader_options_advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
|
||||
/* harmony default export */ __webpack_exports__["default"] = (_node_modules_style_loader_index_js_node_modules_css_loader_index_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_2_node_modules_sass_loader_dist_cjs_js_ref_6_3_node_modules_vue_loader_lib_index_js_vue_loader_options_advanced_2_vue_vue_type_style_index_0_id_d93846a2_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/advanced-2.vue?vue&type=template&id=d93846a2&scoped=true&":
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./js/advanced-2.vue?vue&type=template&id=d93846a2&scoped=true& ***!
|
||||
\**********************************************************************/
|
||||
/*! 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_advanced_2_vue_vue_type_template_id_d93846a2_scoped_true___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!./advanced-2.vue?vue&type=template&id=d93846a2&scoped=true& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=template&id=d93846a2&scoped=true&");
|
||||
/* 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_advanced_2_vue_vue_type_template_id_d93846a2_scoped_true___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_advanced_2_vue_vue_type_template_id_d93846a2_scoped_true___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./js/basic-usage.vue":
|
||||
/*!****************************!*\
|
||||
!*** ./js/basic-usage.vue ***!
|
||||
@@ -461,13 +305,9 @@ __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 _advanced_1__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./advanced-1 */ "./js/advanced-1.vue");
|
||||
/* harmony import */ var _advanced_2__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./advanced-2 */ "./js/advanced-2.vue");
|
||||
/* harmony import */ var _nested_menus__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./nested-menus */ "./js/nested-menus.vue");
|
||||
/* harmony import */ var _close_on_click__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./close-on-click */ "./js/close-on-click.vue");
|
||||
/* harmony import */ var _close_on_scroll__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./close-on-scroll */ "./js/close-on-scroll.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");
|
||||
|
||||
|
||||
|
||||
@@ -476,11 +316,9 @@ __webpack_require__.r(__webpack_exports__);
|
||||
new vue__WEBPACK_IMPORTED_MODULE_0___default.a({
|
||||
components: {
|
||||
BasicUsage: _basic_usage__WEBPACK_IMPORTED_MODULE_1__["default"],
|
||||
Advanced1: _advanced_1__WEBPACK_IMPORTED_MODULE_2__["default"],
|
||||
Advanced2: _advanced_2__WEBPACK_IMPORTED_MODULE_3__["default"],
|
||||
NestedMenus: _nested_menus__WEBPACK_IMPORTED_MODULE_4__["default"],
|
||||
CloseOnClick: _close_on_click__WEBPACK_IMPORTED_MODULE_5__["default"],
|
||||
CloseOnScroll: _close_on_scroll__WEBPACK_IMPORTED_MODULE_6__["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"]
|
||||
}
|
||||
}).$mount('#app');
|
||||
|
||||
@@ -553,191 +391,6 @@ __webpack_require__.r(__webpack_exports__);
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-1.vue?vue&type=script&lang=js&":
|
||||
/*!************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced-1.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__);
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
|
||||
var items = ['Cras justo odio', 'Dapibus ac facilisis in', 'Morbi leo risus', 'Porta ac consectetur ac', 'Vestibulum at eros'];
|
||||
/* harmony default export */ __webpack_exports__["default"] = ({
|
||||
components: {
|
||||
VueContext: vue_context__WEBPACK_IMPORTED_MODULE_0__["default"]
|
||||
},
|
||||
computed: {
|
||||
showReset: function showReset() {
|
||||
return this.items.length < items.length;
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
items: [].concat(items)
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
alertName: function alertName(name) {
|
||||
alert("You clicked on \"".concat(name, "\"!"));
|
||||
},
|
||||
remove: function remove(index) {
|
||||
this.$delete(this.items, index);
|
||||
},
|
||||
reset: function reset() {
|
||||
this.items = [].concat(items);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=script&lang=js&":
|
||||
/*!************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced-2.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 {
|
||||
colors: [{
|
||||
name: 'red',
|
||||
hex: '#f44336'
|
||||
}, {
|
||||
name: 'blue',
|
||||
hex: '#2196F3'
|
||||
}, {
|
||||
name: 'cyan',
|
||||
hex: '#00BCD4'
|
||||
}, {
|
||||
name: 'green',
|
||||
hex: '#4CAF50'
|
||||
}, {
|
||||
name: 'orange',
|
||||
hex: '#FF9800'
|
||||
}],
|
||||
selectedColors: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
colorIndex: function colorIndex(hex) {
|
||||
return this.selectedColors.findIndex(function (color) {
|
||||
return color.hex === hex;
|
||||
});
|
||||
},
|
||||
hasColor: function hasColor(hex) {
|
||||
return this.colorIndex(hex) > -1;
|
||||
},
|
||||
toggle: function toggle(color) {
|
||||
var index = this.colorIndex(color.hex);
|
||||
|
||||
if (index > -1) {
|
||||
this.$delete(this.selectedColors, index);
|
||||
} else {
|
||||
this.selectedColors.push(color);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./js/basic-usage.vue?vue&type=script&lang=js&":
|
||||
@@ -1062,25 +715,6 @@ exports.push([module.i, "@charset \"UTF-8\";\n.v-context, .v-context ul {\n bac
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true&":
|
||||
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true& ***!
|
||||
\***********************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".color-box[data-v-d93846a2] {\n width: 100px;\n height: 100px;\n margin-right: 10px;\n border-radius: 4px;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);\n opacity: 0.6;\n}\n.color-box.selected[data-v-d93846a2] {\n opacity: 1;\n}\n.color-box[data-v-d93846a2]:last-child {\n margin-right: 0;\n}", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/css-loader/lib/css-base.js":
|
||||
@@ -1563,36 +1197,6 @@ process.umask = function() { return 0; };
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true&":
|
||||
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true& ***!
|
||||
\***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
var content = __webpack_require__(/*! !../node_modules/css-loader!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ref--6-2!../node_modules/sass-loader/dist/cjs.js??ref--6-3!../node_modules/vue-loader/lib??vue-loader-options!./advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true& */ "./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=style&index=0&id=d93846a2&lang=scss&scoped=true&");
|
||||
|
||||
if(typeof content === 'string') content = [[module.i, content, '']];
|
||||
|
||||
var transform;
|
||||
var insertInto;
|
||||
|
||||
|
||||
|
||||
var options = {"hmr":true}
|
||||
|
||||
options.transform = transform
|
||||
options.insertInto = undefined;
|
||||
|
||||
var update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options);
|
||||
|
||||
if(content.locals) module.exports = content.locals;
|
||||
|
||||
if(false) {}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/style-loader/lib/addStyles.js":
|
||||
/*!****************************************************!*\
|
||||
!*** ./node_modules/style-loader/lib/addStyles.js ***!
|
||||
@@ -2869,277 +2473,6 @@ if(content.locals) module.exports = content.locals;
|
||||
|
||||
if(false) {}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-1.vue?vue&type=template&id=d95475a4&":
|
||||
/*!****************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced-1.vue?vue&type=template&id=d95475a4& ***!
|
||||
\****************************************************************************************************************************************************************************************/
|
||||
/*! 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", { staticClass: "demo" }, [
|
||||
_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, {
|
||||
name: item,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_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(
|
||||
"div",
|
||||
{
|
||||
directives: [
|
||||
{
|
||||
name: "show",
|
||||
rawName: "v-show",
|
||||
value: _vm.showReset,
|
||||
expression: "showReset"
|
||||
}
|
||||
],
|
||||
staticClass: "my-4 text-right"
|
||||
},
|
||||
[
|
||||
_c(
|
||||
"button",
|
||||
{
|
||||
staticClass:
|
||||
"inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150",
|
||||
attrs: { type: "button" },
|
||||
on: { click: _vm.reset }
|
||||
},
|
||||
[_vm._v("\n Reset Demo\n ")]
|
||||
)
|
||||
]
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c("vue-context", {
|
||||
ref: "menu",
|
||||
scopedSlots: _vm._u([
|
||||
{
|
||||
key: "default",
|
||||
fn: function(ref) {
|
||||
var data = ref.data
|
||||
return [
|
||||
data
|
||||
? [
|
||||
_c("li", [
|
||||
_c(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: function($event) {
|
||||
$event.preventDefault()
|
||||
return _vm.alertName(data.name)
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_vm._v(
|
||||
"\n Alert name\n "
|
||||
)
|
||||
]
|
||||
)
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("li", [
|
||||
_c(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: function($event) {
|
||||
$event.preventDefault()
|
||||
return _vm.remove(data.index)
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_vm._v(
|
||||
'\n Delete "' +
|
||||
_vm._s(data.name) +
|
||||
'"\n '
|
||||
)
|
||||
]
|
||||
)
|
||||
])
|
||||
]
|
||||
: _vm._e()
|
||||
]
|
||||
}
|
||||
}
|
||||
])
|
||||
})
|
||||
],
|
||||
1
|
||||
)
|
||||
}
|
||||
var staticRenderFns = []
|
||||
render._withStripped = true
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/advanced-2.vue?vue&type=template&id=d93846a2&scoped=true&":
|
||||
/*!****************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./js/advanced-2.vue?vue&type=template&id=d93846a2&scoped=true& ***!
|
||||
\****************************************************************************************************************************************************************************************************/
|
||||
/*! 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",
|
||||
{ staticClass: "mt-5" },
|
||||
[
|
||||
_c(
|
||||
"div",
|
||||
{ staticClass: "flex flex-wrap" },
|
||||
_vm._l(_vm.colors, function(color, index) {
|
||||
return _c(
|
||||
"div",
|
||||
{
|
||||
key: index,
|
||||
staticClass: "color-box",
|
||||
class: { selected: _vm.hasColor(color.hex) },
|
||||
style: { "background-color": color.hex },
|
||||
on: {
|
||||
contextmenu: function($event) {
|
||||
$event.preventDefault()
|
||||
return _vm.$refs.menu.open($event, color)
|
||||
}
|
||||
}
|
||||
},
|
||||
[_vm._v("\n \n ")]
|
||||
)
|
||||
}),
|
||||
0
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c("h5", { staticClass: "my-4" }, [
|
||||
_vm._v("\n Selected colors:\n ")
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("code", { staticClass: "mb-3" }, [_vm._v(_vm._s(_vm.selectedColors))]),
|
||||
_vm._v(" "),
|
||||
_c("vue-context", {
|
||||
ref: "menu",
|
||||
scopedSlots: _vm._u(
|
||||
[
|
||||
{
|
||||
key: "default",
|
||||
fn: function(child) {
|
||||
return child.data
|
||||
? [
|
||||
_c("li", [
|
||||
_c(
|
||||
"a",
|
||||
{
|
||||
attrs: { href: "#" },
|
||||
on: {
|
||||
click: function($event) {
|
||||
$event.preventDefault()
|
||||
return _vm.toggle(child.data)
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_vm._v(
|
||||
"\n " +
|
||||
_vm._s(
|
||||
_vm.hasColor(child.data.hex)
|
||||
? "Remove Color"
|
||||
: "Select Color"
|
||||
) +
|
||||
"\n "
|
||||
)
|
||||
]
|
||||
)
|
||||
])
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
}
|
||||
],
|
||||
null,
|
||||
true
|
||||
)
|
||||
})
|
||||
],
|
||||
1
|
||||
)
|
||||
}
|
||||
var staticRenderFns = []
|
||||
render._withStripped = true
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./js/basic-usage.vue?vue&type=template&id=eebfc2ec&":
|
||||
|
||||
Reference in New Issue
Block a user