@web-utils/component 2.7.29 → 2.7.31

package/dist/components/search-popover/index.js

@@ -1,24 +1,30 @@
-var __async = (__this, __arguments, generator) => new Promise((resolve, reject) => {
-  var fulfilled = (value) => {
-    try {
-      step(generator.next(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, rejected = (value) => {
-    try {
-      step(generator.throw(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-  step((generator = generator.apply(__this, __arguments)).next());
-});
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { copy, isInContainer } from "@web-utils/core";
 import ClickOutside from "element-ui/lib/utils/clickoutside";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     directives: [{
       name: "show",
@@ -34,7 +40,7 @@ var render = function() {
     staticClass: "search-popover"
   }, [_c("div", {
     staticStyle: {
-      padding: "10px"
+      "padding": "10px"
     }
   }, [_c("input", {
     directives: [{
@@ -46,32 +52,34 @@ var render = function() {
     ref: "searchInput",
     staticClass: "search-input",
     attrs: {
-      placeholder: _vm.currentItem ? _vm.currentItem.name : "输入关键字搜索 ..."
+      "placeholder": _vm.currentItem ? _vm.currentItem.name : "输入关键字搜索 ..."
     },
     domProps: {
-      value: _vm.keyword
+      "value": _vm.keyword
     },
     on: {
-      input: function($event) {
-        $event.target.composing || (_vm.keyword = $event.target.value);
+      "input": function($event) {
+        if ($event.target.composing)
+          return;
+        _vm.keyword = $event.target.value;
       }
     }
   })]), _c("ul", {
     ref: "ul",
     staticStyle: {
       "list-style-type": "none",
-      flex: "1",
-      overflow: "auto"
+      "flex": "1",
+      "overflow": "auto"
     }
   }, [_vm.filterList.length ? _vm._l(_vm.filterList, function(item, index) {
     return _c("li", {
       key: item.name + index,
       staticClass: "search-li",
       attrs: {
-        id: `item-${index}`
+        "id": `item-${index}`
       },
       on: {
-        mousemove: function($event) {
+        "mousemove": function($event) {
           return _vm.mouseHoverItem(item, index);
         }
       }
@@ -80,12 +88,12 @@ var render = function() {
         active: _vm.currentIndex === index
       }],
       attrs: {
-        target: item.url ? "_blank" : "",
-        rel: "noopener noreferrer",
-        href: item.url ? item.url : "javascript:void(0)"
+        "target": item.url ? "_blank" : "",
+        "rel": "noopener noreferrer",
+        "href": item.url ? item.url : "javascript:void(0)"
       },
       on: {
-        click: function($event) {
+        "click": function($event) {
           return _vm.onItemClick(item);
         }
       }
@@ -95,9 +103,9 @@ var render = function() {
       class: item.icon || "el-icon-menu"
     })]), _c("div", {
       staticStyle: {
-        flex: "1",
+        "flex": "1",
         "text-align": "left",
-        padding: "0 10px",
+        "padding": "0 10px",
         "overflow-x": "hidden",
         "box-sizing": "border-box"
       }
@@ -113,32 +121,32 @@ var render = function() {
     }, [_c("svg", {
       staticClass: "action",
       attrs: {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20"
+        "width": "20",
+        "height": "20",
+        "viewBox": "0 0 20 20"
       }
     }, [_c("g", {
       attrs: {
-        stroke: "currentColor",
-        fill: "none",
+        "stroke": "currentColor",
+        "fill": "none",
         "fill-rule": "evenodd",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }
     }, [_c("path", {
       attrs: {
-        d: "M18 3v4c0 2-2 4-4 4H2"
+        "d": "M18 3v4c0 2-2 4-4 4H2"
       }
     }), _c("path", {
       attrs: {
-        d: "M8 17l-6-6 6-6"
+        "d": "M8 17l-6-6 6-6"
       }
     })])])])])]);
   }) : _vm.evalResult !== "" ? _c("li", {
     staticClass: "search-li",
     on: {
-      click: _vm.copyEvalResult,
-      mousemove: function($event) {
+      "click": _vm.copyEvalResult,
+      "mousemove": function($event) {
         return _vm.mouseHoverItem({}, -1);
       }
     }
@@ -147,14 +155,14 @@ var render = function() {
       active: _vm.currentIndex === -1
     }],
     attrs: {
-      rel: "noopener noreferrer",
-      href: "javascript:void(0)"
+      "rel": "noopener noreferrer",
+      "href": "javascript:void(0)"
     }
   }, [_vm._m(0), _c("div", {
     staticStyle: {
-      flex: "1",
+      "flex": "1",
       "text-align": "left",
-      padding: "0 10px",
+      "padding": "0 10px",
       "overflow-x": "hidden",
       "box-sizing": "border-box"
     }
@@ -170,33 +178,33 @@ var render = function() {
   }, [_c("svg", {
     staticClass: "action",
     attrs: {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20"
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20"
     }
   }, [_c("g", {
     attrs: {
-      stroke: "currentColor",
-      fill: "none",
+      "stroke": "currentColor",
+      "fill": "none",
       "fill-rule": "evenodd",
       "stroke-linecap": "round",
       "stroke-linejoin": "round"
     }
   }, [_c("path", {
     attrs: {
-      d: "M18 3v4c0 2-2 4-4 4H2"
+      "d": "M18 3v4c0 2-2 4-4 4H2"
     }
   }), _c("path", {
     attrs: {
-      d: "M8 17l-6-6 6-6"
+      "d": "M8 17l-6-6 6-6"
     }
   })])])])])]) : _c("li", {
     staticStyle: {
-      height: "100%",
-      display: "flex",
+      "height": "100%",
+      "display": "flex",
       "align-items": "center",
       "justify-content": "center",
-      color: "#808080"
+      "color": "#808080"
     }
   }, [_vm._v(" Sorry,no result ! ")])], 2), _c("div", {
     staticClass: "footer-tips"
@@ -204,20 +212,20 @@ var render = function() {
     staticClass: "keyboard-key"
   }, [_c("svg", {
     attrs: {
-      width: "15",
-      height: "15"
+      "width": "15",
+      "height": "15"
     }
   }, [_c("g", {
     attrs: {
-      fill: "none",
-      stroke: "currentColor",
+      "fill": "none",
+      "stroke": "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       "stroke-width": "1.2"
     }
   }, [_c("path", {
     attrs: {
-      d: "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
+      "d": "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
     }
   })])])]), _c("span", {
     staticStyle: {
@@ -228,39 +236,39 @@ var render = function() {
     staticClass: "keyboard-key"
   }, [_c("svg", {
     attrs: {
-      width: "15",
-      height: "15"
+      "width": "15",
+      "height": "15"
     }
   }, [_c("g", {
     attrs: {
-      fill: "none",
-      stroke: "currentColor",
+      "fill": "none",
+      "stroke": "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       "stroke-width": "1.2"
     }
   }, [_c("path", {
     attrs: {
-      d: "M7.5 3.5v8M10.5 8.5l-3 3-3-3"
+      "d": "M7.5 3.5v8M10.5 8.5l-3 3-3-3"
     }
   })])])]), _c("span", {
     staticClass: "keyboard-key"
   }, [_c("svg", {
     attrs: {
-      width: "15",
-      height: "15"
+      "width": "15",
+      "height": "15"
     }
   }, [_c("g", {
     attrs: {
-      fill: "none",
-      stroke: "currentColor",
+      "fill": "none",
+      "stroke": "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       "stroke-width": "1.2"
     }
   }, [_c("path", {
     attrs: {
-      d: "M7.5 11.5v-8M10.5 6.5l-3-3-3 3"
+      "d": "M7.5 11.5v-8M10.5 6.5l-3-3-3 3"
     }
   })])])]), _c("span", {
     staticStyle: {
@@ -271,35 +279,39 @@ var render = function() {
     staticClass: "keyboard-key"
   }, [_c("svg", {
     attrs: {
-      width: "15",
-      height: "15"
+      "width": "15",
+      "height": "15"
     }
   }, [_c("g", {
     attrs: {
-      fill: "none",
-      stroke: "currentColor",
+      "fill": "none",
+      "stroke": "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       "stroke-width": "1.2"
     }
   }, [_c("path", {
     attrs: {
-      d: "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
+      "d": "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
     }
   })])])]), _c("span", {
     staticStyle: {
       "font-size": "12px"
     }
   }, [_vm._v("关闭")])])]);
-}, staticRenderFns = [function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+};
+var staticRenderFns = [function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "search-icon"
   }, [_c("i", {
     staticClass: "fa fa-table"
   })]);
 }];
-const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
+const SearchPopover_vue_vue_type_style_index_0_lang = "";
+const __vue2_script = {
   name: "SearchPopover",
   directives: {
     ClickOutside
@@ -312,7 +324,7 @@ const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
   },
   data() {
     return {
-      showPopover: !1,
+      showPopover: false,
       keyword: "",
       currentIndex: 0,
       last: 0
@@ -336,10 +348,17 @@ const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
   },
   watch: {
     keyword() {
-      this.currentIndex = 0, !this.currentItem && this.currentIndex !== -1 && (this.currentIndex = -1);
+      this.currentIndex = 0;
+      if (!this.currentItem && this.currentIndex !== -1) {
+        this.currentIndex = -1;
+      }
     },
     showPopover(newVal) {
-      newVal ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+      if (newVal) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
     }
   },
   mounted() {
@@ -351,17 +370,20 @@ const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
   methods: {
     onItemClick(item) {
       return __async(this, null, function* () {
-        item.path && (this.hidePopover(), yield this.$router.push(item.path));
+        if (item.path) {
+          this.hidePopover();
+          yield this.$router.push(item.path);
+        }
       });
     },
     copyEvalResult() {
       return copy(this.evalResult);
     },
     hidePopover() {
-      this.showPopover = !1;
+      this.showPopover = false;
     },
     displayPopover() {
-      this.showPopover = !0;
+      this.showPopover = true;
     },
     mouseHoverItem(item, index) {
       this.currentIndex = index;
@@ -370,9 +392,45 @@ const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
       return __async(this, null, function* () {
         if (event.key === "Shift") {
           const cost = Date.now() - this.last;
-          cost > 0 && cost < 500 ? (this.showPopover = !0, yield this.$nextTick(), this.$refs.searchInput.focus()) : this.last = Date.now();
+          if (cost > 0 && cost < 500) {
+            this.showPopover = true;
+            yield this.$nextTick();
+            this.$refs.searchInput.focus();
+          } else {
+            this.last = Date.now();
+          }
+        }
+        if (this.showPopover === true) {
+          if (event.key === "Escape") {
+            this.hidePopover();
+          }
+          if (event.key === "Enter") {
+            if (this.currentItem) {
+              if (this.currentItem.url) {
+                window.open(this.currentItem.url, "_blank");
+                this.hidePopover();
+              } else if (this.currentItem.path) {
+                yield this.onItemClick(this.currentItem);
+              }
+            } else {
+              this.copyEvalResult();
+            }
+          }
+          if (event.key === "ArrowUp") {
+            this.currentIndex--;
+            if (this.currentIndex < 0) {
+              this.currentIndex = this.filterList.length - 1;
+            }
+            this.scrollIntoView(this.currentIndex);
+          }
+          if (event.key === "ArrowDown") {
+            this.currentIndex++;
+            if (this.currentIndex >= this.filterList.length) {
+              this.currentIndex = 0;
+            }
+            this.scrollIntoView(this.currentIndex);
+          }
         }
-        this.showPopover === !0 && (event.key === "Escape" && this.hidePopover(), event.key === "Enter" && (this.currentItem ? this.currentItem.url ? (window.open(this.currentItem.url, "_blank"), this.hidePopover()) : this.currentItem.path && (yield this.onItemClick(this.currentItem)) : this.copyEvalResult()), event.key === "ArrowUp" && (this.currentIndex--, this.currentIndex < 0 && (this.currentIndex = this.filterList.length - 1), this.scrollIntoView(this.currentIndex)), event.key === "ArrowDown" && (this.currentIndex++, this.currentIndex >= this.filterList.length && (this.currentIndex = 0), this.scrollIntoView(this.currentIndex)));
       });
     },
     scrollIntoView(index) {
@@ -385,23 +443,27 @@ const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
         return;
       }
       const item = this.$refs.ul.querySelector(`#item-${index}`);
-      isInContainer(item, this.$refs.ul, { topOffset: -78, bottomOffset: 78 }) || (this.$refs.ul.scrollTop = item.offsetTop - item.clientHeight + 20);
+      if (!isInContainer(item, this.$refs.ul, { topOffset: -78, bottomOffset: 78 })) {
+        this.$refs.ul.scrollTop = item.offsetTop - item.clientHeight + 20;
+      }
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const SearchPopover = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/search-popover/style.css

@@ -1 +1,93 @@
-.search-popover{border-radius:4px;z-index:100;position:fixed;overflow:hidden;background-color:#f5f6f7;display:inline-flex;flex-direction:column;border:1px solid #1989fa;width:560px;height:500px;top:0;left:0;transform:translate3d(calc((100vw - 560px)/2),15%,0);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACZJREFUeNpi/PTpEwMY8PLyMsFZnz9/ZoKzgAzG////Q1hAABBgAFeiDto+NxIZAAAAAElFTkSuQmCC);background-repeat:repeat}.search-popover .footer-tips{padding:10px;text-align:left;border-top:1px solid #1989fa}.search-popover .keyboard-key{align-items:center;background:linear-gradient(-225deg,#d5dbe4,#f8f8f8);border-radius:2px;box-shadow:inset 0 -2px #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px #1e235a66;display:inline-flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;width:20px}.search-popover .search-input{height:46px;border:1px solid #1989fa;appearance:none;border-radius:4px;outline:none;width:100%;box-sizing:border-box;padding:10px}.search-popover .search-li{padding:10px}.search-popover .search-icon{color:#969faf;flex-shrink:0;font-size:24px}.search-popover .search-item{box-shadow:0 1px 3px #d4d9e1;text-decoration:none;box-sizing:border-box;color:#000;padding:10px;display:flex;align-items:center;border-radius:4px;background-color:#fff;overflow-x:hidden}.search-popover .search-item .search-action{display:none}.search-popover .search-item .url{color:#969faf;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow-x:hidden}.search-popover .search-item.active{color:#fff;background-color:#1989fa}.search-popover .search-item.active .url{color:#fff}.search-popover .search-item.active .search-action{display:inline-block}.search-popover .search-item.active .search-icon{color:#fff}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.search-popover {
+  border-radius: 4px;
+  z-index: 100;
+  position: fixed;
+  overflow: hidden;
+  background-color: #f5f6f7;
+  display: inline-flex;
+  flex-direction: column;
+  border: 1px solid #1989fa;
+  width: 560px;
+  height: 500px;
+  top: 0;
+  left: 0;
+  transform: translate3d(calc((100vw - 560px) / 2), 15%, 0);
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACZJREFUeNpi/PTpEwMY8PLyMsFZnz9/ZoKzgAzG////Q1hAABBgAFeiDto+NxIZAAAAAElFTkSuQmCC");
+  background-repeat: repeat;
+}
+.search-popover .footer-tips {
+  padding: 10px;
+  text-align: left;
+  border-top: 1px solid #1989fa;
+}
+.search-popover .keyboard-key {
+  align-items: center;
+  background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+  border-radius: 2px;
+  box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+  display: inline-flex;
+  height: 18px;
+  justify-content: center;
+  margin-right: 0.4em;
+  padding-bottom: 2px;
+  width: 20px;
+}
+.search-popover .search-input {
+  height: 46px;
+  border: 1px solid #1989fa;
+  appearance: none;
+  border-radius: 4px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.search-popover .search-li {
+  padding: 10px;
+}
+.search-popover .search-icon {
+  color: #969faf;
+  flex-shrink: 0;
+  font-size: 24px;
+}
+.search-popover .search-item {
+  box-shadow: 0 1px 3px 0 #d4d9e1;
+  text-decoration: none;
+  box-sizing: border-box;
+  color: #000;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  background-color: #fff;
+  overflow-x: hidden;
+}
+.search-popover .search-item .search-action {
+  display: none;
+}
+.search-popover .search-item .url {
+  color: #969faf;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  overflow-x: hidden;
+}
+.search-popover .search-item.active {
+  color: #fff;
+  background-color: #1989fa;
+}
+.search-popover .search-item.active .url {
+  color: #fff;
+}
+.search-popover .search-item.active .search-action {
+  display: inline-block;
+}
+.search-popover .search-item.active .search-icon {
+  color: #fff;
+}