huiyi-select-table 0.1.17 → 0.1.18

package/huiyi-select-table.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as M, ref as a, computed as j, resolveComponent as _, openBlock as p, createElementBlock as k, createVNode as C, createBlock as R, Teleport as H, normalizeStyle as Q, withCtx as z, Fragment as K, renderList as U, nextTick as N } from "vue";
-const $ = /* @__PURE__ */ M({
+import { defineComponent as j, ref as a, computed as H, resolveComponent as y, openBlock as p, createElementBlock as k, createVNode as C, createBlock as R, Teleport as Q, normalizeStyle as z, withCtx as K, Fragment as N, renderList as U, nextTick as $ } from "vue";
+const G = /* @__PURE__ */ j({
   name: "InputSelectCompont",
   __name: "SelectTable",
   props: {
@@ -13,10 +13,10 @@ const $ = /* @__PURE__ */ M({
     isIndex: 1
   },
   emits: ["slectValue"],
-  setup(t, { emit: c }) {
-    const u = t, s = a("");
+  setup(o, { emit: c }) {
+    const u = o, s = a("");
     s.value = u.searchQueryInit;
-    const r = a(!1), n = a([]), b = a([]), g = a(!1), o = a(-1), h = a(-1), f = a(null), w = a(null), S = j(() => {
+    const r = a(!1), t = a([]), b = a([]), g = a(!1), n = a(-1), v = a(-1), h = a(null), w = a(null), S = ({ row: e, rowIndex: l }) => n.value === l ? "warning-row" : "", V = H(() => {
       if (!r.value || !w.value)
         return { display: "none" };
       const e = w.value.getBoundingClientRect();
@@ -29,10 +29,10 @@ const $ = /* @__PURE__ */ M({
         backgroundColor: "#FFF",
         height: "230px"
       };
-    }), y = () => {
-      r.value = !0, s.value ? (n.value = u.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(s.value.toLowerCase()))), console.log(n.value), o.value = -1, h.value = -1) : n.value = u.originalData;
-    }, D = c, V = (e) => {
-      b.value = e;
+    }), _ = () => {
+      r.value = !0, s.value ? (t.value = u.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(s.value.toLowerCase()))), console.log(t.value), n.value = -1, v.value = -1) : t.value = u.originalData;
+    }, D = c, T = (e) => {
+      b.value = e, console.log(e);
     }, x = (e) => {
       b.value = e, e && (s.value = e[u.showValue], r.value = !1);
       let l = {
@@ -40,44 +40,46 @@ const $ = /* @__PURE__ */ M({
         isIndex: u.isIndex
       };
       D("slectValue", l);
-    }, T = () => {
-      g.value == !1 && (r.value = !1);
     }, O = () => {
-      g.value = !0;
+      g.value == !1 && setTimeout(() => {
+        r.value = !1;
+      }, 150);
     }, q = () => {
+      g.value = !0;
+    }, B = () => {
       g.value = !1;
-    }, B = (e) => {
-      if (console.log(e.key, "event.key "), n.value.length !== 0)
+    }, E = (e) => {
+      if (console.log(e.key, "event.key "), t.value.length !== 0)
         if (e.key == "ArrowDown") {
           e.preventDefault();
-          let l = o.value + 1;
-          l >= n.value.length && (l = 0), console.log(l, "newIndex"), I(l);
+          let l = n.value + 1;
+          l >= t.value.length && (l = 0), console.log(l, "newIndex"), I(l);
         } else if (e.key == "ArrowUp") {
           e.preventDefault();
-          let l = o.value - 1;
-          l < 0 && (l = n.value.length - 1), I(l);
+          let l = n.value - 1;
+          l < 0 && (l = t.value.length - 1), I(l);
         } else
-          e.key === "Enter" && (e.preventDefault(), r.value == !0 ? E() : y());
-    }, E = () => {
-      if (o.value >= 0) {
-        h.value === o.value ? h.value = -1 : h.value = o.value;
-        const e = n.value;
-        console.log(e[o.value], o.value, "hh[currentHighlightIndex]"), x(n.value[o.value]);
+          e.key === "Enter" && (e.preventDefault(), r.value == !0 ? F() : _());
+    }, F = () => {
+      if (n.value >= 0) {
+        v.value === n.value ? v.value = -1 : v.value = n.value;
+        const e = t.value;
+        console.log(e[n.value], n.value, "hh[currentHighlightIndex]"), x(t.value[n.value]);
       }
     }, I = (e) => {
-      o.value = e, N(() => {
-        if (f.value && n.value.length > 0 && e >= 0 && e < n.value.length) {
-          const d = f.value.$el.querySelectorAll(".el-table__row");
-          console.log(d, "rows"), d.length > 0 && e < d.length && d[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), f.value.setCurrentRow(n.value[o.value]);
+      n.value = e, $(() => {
+        if (h.value && t.value.length > 0 && e >= 0 && e < t.value.length) {
+          const d = h.value.$el.querySelectorAll(".el-table__row");
+          console.log(d, "rows"), d.length > 0 && e < d.length && d[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), h.value.setCurrentRow(t.value[n.value]);
         }
       });
     };
     return (e, l) => {
-      const d = _("el-input"), F = _("el-table-column"), L = _("el-table");
+      const d = y("el-input"), L = y("el-table-column"), A = y("el-table");
       return p(), k("span", {
         class: "huiyi-select-spanInput",
-        onMouseover: O,
-        onMouseout: q,
+        onMouseover: q,
+        onMouseout: B,
         ref_key: "inputContainerRef",
         ref: w
       }, [
@@ -86,33 +88,33 @@ const $ = /* @__PURE__ */ M({
           modelValue: s.value,
           "onUpdate:modelValue": l[0] || (l[0] = (i) => s.value = i),
           id: "filterInput",
-          onInput: y,
+          onInput: _,
           style: { width: "200px" },
-          readonly: t.isRead,
-          required: t.isRequired,
-          onFocus: y,
-          onBlur: T,
-          onKeydown: B
+          readonly: o.isRead,
+          required: o.isRequired,
+          onFocus: _,
+          onBlur: O,
+          onKeydown: E
         }, null, 8, ["modelValue", "readonly", "required"]),
-        (p(), R(H, {
+        (p(), R(Q, {
           to: "body",
           class: "huiyi-select-spanDiv"
         }, [
-          C(L, {
+          C(A, {
             ref_key: "singleTableRef",
-            ref: f,
+            ref: h,
             border: "",
             class: "huiyi-select-spanInputTable",
-            "row-class-name": t.originalData,
+            "row-class-name": S,
             "highlight-current-row": "",
-            data: n.value,
-            onCurrentChange: V,
+            data: t.value,
+            onCurrentChange: T,
             onRowClick: x,
-            style: Q(S.value)
+            style: z(V.value)
           }, {
-            default: z(() => [
-              (p(!0), k(K, null, U(t.columnList, (i, A) => (p(), R(F, {
-                key: A,
+            default: K(() => [
+              (p(!0), k(N, null, U(o.columnList, (i, M) => (p(), R(L, {
+                key: M,
                 prop: i.prop,
                 align: i.align,
                 label: i.label,
@@ -122,37 +124,37 @@ const $ = /* @__PURE__ */ M({
               }, null, 8, ["prop", "align", "label", "width", "header-align"]))), 128))
             ]),
             _: 1
-          }, 8, ["row-class-name", "data", "style"])
+          }, 8, ["data", "style"])
         ]))
       ], 544);
     };
   }
 });
-const G = (t, c) => {
-  const u = t.__vccOpts || t;
+const J = (o, c) => {
+  const u = o.__vccOpts || o;
   for (const [s, r] of c)
     u[s] = r;
   return u;
-}, v = /* @__PURE__ */ G($, [["__scopeId", "data-v-37dd30a8"]]);
-v.install = (t) => {
-  t.component(v.name, v);
+}, f = /* @__PURE__ */ J(G, [["__scopeId", "data-v-f5648f73"]]);
+f.install = (o) => {
+  o.component(f.name, f);
 };
-const J = [
-  v
-], m = function(t) {
-  m.installed || J.forEach((c) => {
-    t.component(c.name, c);
+const P = [
+  f
+], m = function(o) {
+  m.installed || P.forEach((c) => {
+    o.component(c.name, c);
   });
 };
 typeof window < "u" && window.Vue && m(window.Vue);
-const W = {
+const X = {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install: m,
   // 以下是具体的组件列表
-  SelectTable: v
+  SelectTable: f
 };
 export {
-  v as SelectTable,
-  W as default,
+  f as SelectTable,
+  X as default,
   m as install
 };

package/huiyi-select-table.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.HuiyiSelectTable={},s.Vue))})(this,function(s,e){"use strict";const F="",x=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object,searchQueryInit:String,labelIndex:String,isRead:!1,isRequired:!1,isIndex:1},emits:["slectValue"],setup(n,{emit:f}){const r=n,i=e.ref("");i.value=r.searchQueryInit;const u=e.ref(!1),o=e.ref([]),v=e.ref([]),y=e.ref(!1),a=e.ref(-1),g=e.ref(-1),w=e.ref(null),_=e.ref(null),S=e.computed(()=>{if(!u.value||!_.value)return{display:"none"};const l=_.value.getBoundingClientRect();return{position:"fixed",top:l.bottom+"px",left:l.left+"px",width:l.width+80+"px",zIndex:1e4,backgroundColor:"#FFF",height:"230px"}}),m=()=>{u.value=!0,i.value?(o.value=r.originalData.filter(l=>Object.keys(l).some(t=>String(l[t]).toLowerCase().includes(i.value.toLowerCase()))),console.log(o.value),a.value=-1,g.value=-1):o.value=r.originalData},R=f,T=l=>{v.value=l},b=l=>{v.value=l,l&&(i.value=l[r.showValue],u.value=!1);let t={val:l,isIndex:r.isIndex};R("slectValue",t)},V=()=>{y.value==!1&&(u.value=!1)},D=()=>{y.value=!0},B=()=>{y.value=!1},O=l=>{if(console.log(l.key,"event.key "),o.value.length!==0)if(l.key=="ArrowDown"){l.preventDefault();let t=a.value+1;t>=o.value.length&&(t=0),console.log(t,"newIndex"),k(t)}else if(l.key=="ArrowUp"){l.preventDefault();let t=a.value-1;t<0&&(t=o.value.length-1),k(t)}else l.key==="Enter"&&(l.preventDefault(),u.value==!0?q():m())},q=()=>{if(a.value>=0){g.value===a.value?g.value=-1:g.value=a.value;const l=o.value;console.log(l[a.value],a.value,"hh[currentHighlightIndex]"),b(o.value[a.value])}},k=l=>{a.value=l,e.nextTick(()=>{if(w.value&&o.value.length>0&&l>=0&&l<o.value.length){const p=w.value.$el.querySelectorAll(".el-table__row");console.log(p,"rows"),p.length>0&&l<p.length&&p[l].scrollIntoView({behavior:"smooth",block:"nearest"}),w.value.setCurrentRow(o.value[a.value])}})};return(l,t)=>{const p=e.resolveComponent("el-input"),E=e.resolveComponent("el-table-column"),M=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("span",{class:"huiyi-select-spanInput",onMouseover:D,onMouseout:B,ref_key:"inputContainerRef",ref:_},[e.createVNode(p,{placeholder:"请输入搜索内容",modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=c=>i.value=c),id:"filterInput",onInput:m,style:{width:"200px"},readonly:n.isRead,required:n.isRequired,onFocus:m,onBlur:V,onKeydown:O},null,8,["modelValue","readonly","required"]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body",class:"huiyi-select-spanDiv"},[e.createVNode(M,{ref_key:"singleTableRef",ref:w,border:"",class:"huiyi-select-spanInputTable","row-class-name":n.originalData,"highlight-current-row":"",data:o.value,onCurrentChange:T,onRowClick:b,style:e.normalizeStyle(S.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columnList,(c,j)=>(e.openBlock(),e.createBlock(E,{key:j,prop:c.prop,align:c.align,label:c.label,width:c.width,"header-align":c.headerAlign,"show-overflow-tooltip":""},null,8,["prop","align","label","width","header-align"]))),128))]),_:1},8,["row-class-name","data","style"])]))],544)}}}),L="",d=((n,f)=>{const r=n.__vccOpts||n;for(const[i,u]of f)r[i]=u;return r})(x,[["__scopeId","data-v-37dd30a8"]]);d.install=n=>{n.component(d.name,d)};const I=[d],h=function(n){h.installed||I.forEach(f=>{n.component(f.name,f)})};typeof window<"u"&&window.Vue&&h(window.Vue);const C={install:h,SelectTable:d};s.SelectTable=d,s.default=C,s.install=h,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.HuiyiSelectTable={},s.Vue))})(this,function(s,e){"use strict";const L="",x=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object,searchQueryInit:String,labelIndex:String,isRead:!1,isRequired:!1,isIndex:1},emits:["slectValue"],setup(a,{emit:d}){const r=a,i=e.ref("");i.value=r.searchQueryInit;const u=e.ref(!1),n=e.ref([]),v=e.ref([]),_=e.ref(!1),o=e.ref(-1),g=e.ref(-1),w=e.ref(null),y=e.ref(null),S=({row:l,rowIndex:t})=>o.value===t?"warning-row":"",R=e.computed(()=>{if(!u.value||!y.value)return{display:"none"};const l=y.value.getBoundingClientRect();return{position:"fixed",top:l.bottom+"px",left:l.left+"px",width:l.width+80+"px",zIndex:1e4,backgroundColor:"#FFF",height:"230px"}}),m=()=>{u.value=!0,i.value?(n.value=r.originalData.filter(l=>Object.keys(l).some(t=>String(l[t]).toLowerCase().includes(i.value.toLowerCase()))),console.log(n.value),o.value=-1,g.value=-1):n.value=r.originalData},T=d,V=l=>{v.value=l,console.log(l)},b=l=>{v.value=l,l&&(i.value=l[r.showValue],u.value=!1);let t={val:l,isIndex:r.isIndex};T("slectValue",t)},D=()=>{_.value==!1&&setTimeout(()=>{u.value=!1},150)},B=()=>{_.value=!0},O=()=>{_.value=!1},q=l=>{if(console.log(l.key,"event.key "),n.value.length!==0)if(l.key=="ArrowDown"){l.preventDefault();let t=o.value+1;t>=n.value.length&&(t=0),console.log(t,"newIndex"),k(t)}else if(l.key=="ArrowUp"){l.preventDefault();let t=o.value-1;t<0&&(t=n.value.length-1),k(t)}else l.key==="Enter"&&(l.preventDefault(),u.value==!0?E():m())},E=()=>{if(o.value>=0){g.value===o.value?g.value=-1:g.value=o.value;const l=n.value;console.log(l[o.value],o.value,"hh[currentHighlightIndex]"),b(n.value[o.value])}},k=l=>{o.value=l,e.nextTick(()=>{if(w.value&&n.value.length>0&&l>=0&&l<n.value.length){const p=w.value.$el.querySelectorAll(".el-table__row");console.log(p,"rows"),p.length>0&&l<p.length&&p[l].scrollIntoView({behavior:"smooth",block:"nearest"}),w.value.setCurrentRow(n.value[o.value])}})};return(l,t)=>{const p=e.resolveComponent("el-input"),M=e.resolveComponent("el-table-column"),j=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("span",{class:"huiyi-select-spanInput",onMouseover:B,onMouseout:O,ref_key:"inputContainerRef",ref:y},[e.createVNode(p,{placeholder:"请输入搜索内容",modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=c=>i.value=c),id:"filterInput",onInput:m,style:{width:"200px"},readonly:a.isRead,required:a.isRequired,onFocus:m,onBlur:D,onKeydown:q},null,8,["modelValue","readonly","required"]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body",class:"huiyi-select-spanDiv"},[e.createVNode(j,{ref_key:"singleTableRef",ref:w,border:"",class:"huiyi-select-spanInputTable","row-class-name":S,"highlight-current-row":"",data:n.value,onCurrentChange:V,onRowClick:b,style:e.normalizeStyle(R.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columnList,(c,F)=>(e.openBlock(),e.createBlock(M,{key:F,prop:c.prop,align:c.align,label:c.label,width:c.width,"header-align":c.headerAlign,"show-overflow-tooltip":""},null,8,["prop","align","label","width","header-align"]))),128))]),_:1},8,["data","style"])]))],544)}}}),A="",f=((a,d)=>{const r=a.__vccOpts||a;for(const[i,u]of d)r[i]=u;return r})(x,[["__scopeId","data-v-f5648f73"]]);f.install=a=>{a.component(f.name,f)};const I=[f],h=function(a){h.installed||I.forEach(d=>{a.component(d.name,d)})};typeof window<"u"&&window.Vue&&h(window.Vue);const C={install:h,SelectTable:f};s.SelectTable=f,s.default=C,s.install=h,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huiyi-select-table",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "A Vue.js select table component",
   "main": "huiyi-select-table.umd.js",
   "module": "huiyi-select-table.mjs",

package/style.css

@@ -1 +1 @@
-.el-table .warning-row[data-v-37dd30a8]{--el-table-tr-bg-color: #141}.huiyi-select-spanInput[data-v-37dd30a8]{display:inline-block;position:relative}
+.el-table .warning-row[data-v-f5648f73]{--el-table-tr-bg-color: #141}.huiyi-select-spanInput[data-v-f5648f73]{display:inline-block;position:relative}