@web-utils/component 2.10.0 → 2.10.1

package/easy-popup/index.mjs

@@ -5,18 +5,18 @@ var d = (e, t, i) => new Promise((o, a) => {
     } catch (r) {
       a(r);
     }
-  }, f = (s) => {
+  }, u = (s) => {
     try {
       n(i.throw(s));
     } catch (r) {
       a(r);
     }
-  }, n = (s) => s.done ? o(s.value) : Promise.resolve(s.value).then(h, f);
+  }, n = (s) => s.done ? o(s.value) : Promise.resolve(s.value).then(h, u);
   n((i = i.apply(e, t)).next());
 });
-import { getComputedWidth as p, getComputedHeight as u } from "@web-utils/core";
+import { getComputedWidth as f, getComputedHeight as p } from "@web-utils/core";
 import { n as c } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var x = function() {
+var v = function() {
   var e = this, t = e.$createElement, i = e._self._c || t;
   return i("Transition", {
     attrs: {
@@ -36,10 +36,15 @@ var x = function() {
       "flex-row": e.flexRow,
       "flex-column": e.flexColumn
     }],
-    style: e.position
+    style: e.position,
+    on: {
+      mouseleave: function(o) {
+        e.hideOnMouseLeave && e.hide();
+      }
+    }
   }, [e._t("default")], 2) : e._e()]);
 }, y = [];
-const _ = {
+const x = {
   name: "EasyPopup",
   props: {
     // 是否开启边界检测
@@ -59,7 +64,12 @@ const _ = {
     },
     appendToBody: Boolean,
     flexRow: Boolean,
-    flexColumn: Boolean
+    flexColumn: Boolean,
+    hideOnMouseLeave: {
+      type: Boolean,
+      default: !0
+    },
+    interactive: Boolean
   },
   data() {
     return {
@@ -83,7 +93,7 @@ const _ = {
       return d(this, null, function* () {
         if (this.border) {
           yield this.$nextTick();
-          const e = p(this.$refs.container), t = u(this.$refs.container), i = document.body.offsetWidth, o = document.body.offsetHeight;
+          const e = f(this.$refs.container), t = p(this.$refs.container), i = document.body.offsetWidth, o = document.body.offsetHeight;
           this.axis.x + this.offset.x + e >= i && (this.axis.x = i - e - this.borderWidth - this.offset.x), this.axis.y + this.offset.y + t >= o && (this.axis.y = o - t - this.borderWidth - this.offset.y);
         }
       });
@@ -94,29 +104,32 @@ const _ = {
   },
   methods: {
     show({ clientX: e, clientY: t }) {
-      this.axis = { x: e, y: t }, this.visible || (document.addEventListener("click", this.hide, !0), this.rendered = !0, this.visible = !0), this.appendToBody && document.body.appendChild(this.$el);
+      this.axis = { x: e, y: t }, this.visible || (document.addEventListener("click", this.doHide, !0), this.rendered = !0, this.visible = !0), this.appendToBody && document.body.appendChild(this.$el);
     },
     hide() {
-      this.visible = !1, document.removeEventListener("click", this.hide);
+      this.visible = !1, document.removeEventListener("click", this.doHide);
+    },
+    doHide(e) {
+      this.interactive && this.$el.contains(e.target) || this.hide();
     }
   }
 }, l = {};
-var m = /* @__PURE__ */ c(
-  _,
+var _ = /* @__PURE__ */ c(
   x,
+  v,
   y,
   !1,
-  v,
+  m,
   null,
   null,
   null
 );
-function v(e) {
+function m(e) {
   for (let t in l)
     this[t] = l[t];
 }
 const g = /* @__PURE__ */ function() {
-  return m.exports;
+  return _.exports;
 }();
 export {
   g as default

package/easy-popup/style.css

@@ -1 +1 @@
-.easy-popup{position:fixed;z-index:9999;width:300px;min-height:200px;padding:12px;background:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px #0000001a;user-select:none}@keyframes easy-popup-zoom-in{0%{transform:scale3d(0,0,0);opacity:0}to{opacity:1}}.easy-popup-enter-active,.easy-popup-enter{animation:easy-popup-zoom-in .2s}@keyframes easy-popup-zoom-out{0%{opacity:1}to{transform:scale3d(0,0,0);opacity:0}}.easy-popup-leave-active,.easy-popup-leave{animation:easy-popup-zoom-out .2s}
+.easy-popup{position:fixed;z-index:9999;width:300px;min-height:200px;padding:12px;background:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px #0000001a}@keyframes easy-popup-zoom-in{0%{transform:scale3d(0,0,0);opacity:0}to{opacity:1}}.easy-popup-enter-active,.easy-popup-enter{animation:easy-popup-zoom-in .2s}@keyframes easy-popup-zoom-out{0%{opacity:1}to{transform:scale3d(0,0,0);opacity:0}}.easy-popup-leave-active,.easy-popup-leave{animation:easy-popup-zoom-out .2s}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "author": "Simple",
   "license": "MIT",
   "type": "module",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1452,6 +1452,22 @@
                 "type": "boolean"
               },
               "default": ""
+            },
+            {
+              "name": "hideOnMouseLeave",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "interactive",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
             }
           ],
           "slots": [