Merge pull request #47 from danielelkington/upgrade-to-vue-3

Upgrade to Vue 3

Author: johndatserakis

build/rollup.config.js

@@ -1,5 +1,5 @@
 import vue from 'rollup-plugin-vue';
-import css from 'rollup-plugin-css-only'
+import scss from 'rollup-plugin-scss'
 import buble from 'rollup-plugin-buble';
 import commonjs from 'rollup-plugin-commonjs';
 import resolve from 'rollup-plugin-node-resolve';
@@ -15,18 +15,18 @@ const config = {
     exports: 'named',
     globals: {
       'vue': 'Vue',
-      'v-click-outside': 'vClickOutside'
+      'click-outside-vue3': 'vClickOutside'
     }
   },
   plugins: [
-    commonjs(),
-    resolve(),
     vue({
       css: false,
       compileTemplate: true,
     }),
-    css({ output: 'dist/vue-simple-context-menu.css' }),
+    scss({ output: 'dist/vue-simple-context-menu.css' }),
+    resolve(),
     buble(),
+    commonjs(),
   ],
   external: ['vue', 'v-click-outside']
 };

dist/vue-simple-context-menu.css

@@ -40,6 +40,4 @@
 }
 .vue-simple-context-menu li:last-of-type {
   margin-bottom: 4px;
-}
-
-/*# sourceMappingURL=vue-simple-context-menu.vue.map */
+}

dist/vue-simple-context-menu.esm.js

@@ -1,8 +1,15 @@
-import Vue from 'vue';
-import vClickOutside from 'v-click-outside';
+import { resolveDirective, openBlock, createElementBlock, withDirectives, Fragment, renderList, withModifiers, normalizeClass, createElementVNode } from 'vue';
 
-//
-Vue.use(vClickOutside);
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var vClickOutside_umd = createCommonjsModule(function (module, exports) {
+!function(e,n){module.exports=n();}(commonjsGlobal,function(){var e="__v-click-outside",n="undefined"!=typeof window,t="undefined"!=typeof navigator,r=n&&("ontouchstart"in window||t&&navigator.msMaxTouchPoints>0)?["touchstart"]:["click"],i=function(e){var n=e.event,t=e.handler;(0, e.middleware)(n)&&t(n);},a=function(n,t){var a=function(e){var n="function"==typeof e;if(!n&&"object"!=typeof e){ throw new Error("v-click-outside: Binding value must be a function or an object"); }return {handler:n?e:e.handler,middleware:e.middleware||function(e){return e},events:e.events||r,isActive:!(!1===e.isActive),detectIframe:!(!1===e.detectIframe),capture:Boolean(e.capture)}}(t.value),o=a.handler,d=a.middleware,c=a.detectIframe,u=a.capture;if(a.isActive){if(n[e]=a.events.map(function(e){return {event:e,srcTarget:document.documentElement,handler:function(e){return function(e){var n=e.el,t=e.event,r=e.handler,a=e.middleware,o=t.path||t.composedPath&&t.composedPath();(o?o.indexOf(n)<0:!n.contains(t.target))&&i({event:t,handler:r,middleware:a});}({el:n,event:e,handler:o,middleware:d})},capture:u}}),c){var l={event:"blur",srcTarget:window,handler:function(e){return function(e){var n=e.el,t=e.event,r=e.handler,a=e.middleware;setTimeout(function(){var e=document.activeElement;e&&"IFRAME"===e.tagName&&!n.contains(e)&&i({event:t,handler:r,middleware:a});},0);}({el:n,event:e,handler:o,middleware:d})},capture:u};n[e]=[].concat(n[e],[l]);}n[e].forEach(function(t){var r=t.event,i=t.srcTarget,a=t.handler;return setTimeout(function(){n[e]&&i.addEventListener(r,a,u);},0)});}},o=function(n){(n[e]||[]).forEach(function(e){return e.srcTarget.removeEventListener(e.event,e.handler,e.capture)}),delete n[e];},d=n?{beforeMount:a,updated:function(e,n){var t=n.value,r=n.oldValue;JSON.stringify(t)!==JSON.stringify(r)&&(o(e),a(e,{value:t}));},unmounted:o}:{};return {install:function(e){e.directive("click-outside",d);},directive:d}});
+
+});
 
 var script = {
   name: "VueSimpleContextMenu",
@@ -16,6 +23,13 @@ var script = {
       required: true
     }
   },
+  emits: [
+    'menu-closed',
+    'option-clicked'
+  ],
+  directives: {
+    'click-outside': vClickOutside_umd.directive
+  },
   data: function data() {
     return {
       item: null,
@@ -80,173 +94,53 @@ var script = {
   mounted: function mounted() {
     document.body.addEventListener("keyup", this.onEscKeyRelease);
   },
-  beforeDestroy: function beforeDestroy() {
+  beforeUnmount: function beforeUnmount() {
     document.removeEventListener("keyup", this.onEscKeyRelease);
   }
 };
 
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    var options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    var hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            var originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            var existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = ["innerHTML"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _directive_click_outside = resolveDirective("click-outside");
+
+  return (openBlock(), createElementBlock("div", null, [
+    withDirectives((openBlock(), createElementBlock("ul", {
+      id: $props.elementId,
+      class: "vue-simple-context-menu"
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($props.options, function (option, index) {
+        return (openBlock(), createElementBlock("li", {
+          key: index,
+          onClick: withModifiers(function ($event) { return ($options.optionClicked(option)); }, ["stop"]),
+          class: normalizeClass(["vue-simple-context-menu__item", [
+          option.class,
+          option.type === 'divider' ? 'vue-simple-context-menu__divider' : ''
+        ]])
+        }, [
+          createElementVNode("span", {
+            innerHTML: option.name
+          }, null, 8 /* PROPS */, _hoisted_3)
+        ], 10 /* CLASS, PROPS */, _hoisted_2))
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 8 /* PROPS */, _hoisted_1)), [
+      [_directive_click_outside, $options.onClickOutside]
+    ])
+  ]))
 }
 
-/* script */
-var __vue_script__ = script;
-/* template */
-var __vue_render__ = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", [
-    _c(
-      "ul",
-      {
-        directives: [
-          {
-            name: "click-outside",
-            rawName: "v-click-outside",
-            value: _vm.onClickOutside,
-            expression: "onClickOutside"
-          }
-        ],
-        staticClass: "vue-simple-context-menu",
-        attrs: { id: _vm.elementId }
-      },
-      _vm._l(_vm.options, function(option, index) {
-        return _c(
-          "li",
-          {
-            key: index,
-            staticClass: "vue-simple-context-menu__item",
-            class: [
-              option.class,
-              option.type === "divider"
-                ? "vue-simple-context-menu__divider"
-                : ""
-            ],
-            on: {
-              click: function($event) {
-                $event.stopPropagation();
-                return _vm.optionClicked(option)
-              }
-            }
-          },
-          [_c("span", { domProps: { innerHTML: _vm._s(option.name) } })]
-        )
-      }),
-      0
-    )
-  ])
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  var __vue_inject_styles__ = undefined;
-  /* scoped */
-  var __vue_scope_id__ = undefined;
-  /* module identifier */
-  var __vue_module_identifier__ = undefined;
-  /* functional template */
-  var __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  var __vue_component__ = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+script.render = render;
+script.__file = "src/vue-simple-context-menu.vue";
 
 // Import vue component
 
-// install function executed by Vue.use()
-function install (Vue) {
+// install function executed by app.use()
+function install (app) {
   if (install.installed) { return; }
   install.installed = true;
-  Vue.component('VueSimpleContextMenu', __vue_component__);
+  app.component('VueSimpleContextMenu', script);
 }
 
 // Create module definition for Vue.use()
@@ -269,5 +163,5 @@ if (GlobalVue) {
 // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
 // export const RollupDemoDirective = component;
 
-export default __vue_component__;
+export default script;
 export { install };