huiyi-select-table 0.0.0 → 0.0.1

package/dist/huiyi-select-table.css

@@ -1 +1 @@
-.el-table .warning-row[data-v-3cde86ca]{--el-table-tr-bg-color: #141}.spanInput[data-v-3cde86ca]{display:inline-block;position:relative}.spanDiv[data-v-3cde86ca]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}
+.el-table .warning-row[data-v-2d4704ea]{--el-table-tr-bg-color: #141}.spanInput[data-v-2d4704ea]{display:inline-block;position:relative}.spanDiv[data-v-2d4704ea]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}

package/dist/huiyi-select-table.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as I, resolveComponent as c, createBlock as f, openBlock as a, unref as w, isRef as L, withCtx as p, createElementBlock as _, Fragment as h, renderList as b, createVNode as O } from "vue";
-const j = /* @__PURE__ */ I({
-  name: "InputSelectCom",
+import { defineComponent as M, resolveComponent as d, createElementBlock as y, openBlock as g, createVNode as C, withDirectives as j, unref as m, isRef as A, createElementVNode as H, withCtx as N, Fragment as F, renderList as K, createBlock as U, vShow as q } from "vue";
+const Q = { class: "spanDiv" }, $ = /* @__PURE__ */ M({
+  name: "InputSelectCompont",
   __name: "SelectTable",
   props: {
     originalData: Object,
@@ -8,81 +8,111 @@ const j = /* @__PURE__ */ I({
     columnList: Object
   },
   emits: ["slectValue"],
-  setup(e, { emit: l }) {
-    const r = e, n = ref(""), u = ref(""), C = ref(!1), v = ref([]), d = ref([]);
-    ref(!1), ref(-1), ref(-1);
-    const V = ref(null), k = l, y = (t) => {
-      d.value = t;
-    }, x = (t) => {
-      d.value = t, t && (u.value = t[r.showValue], C.value = !1), k("slectValue", t);
+  setup(n, { emit: r }) {
+    const u = n, a = ref(""), s = ref(!1), t = ref([]), b = ref([]), p = ref(!1), o = ref(-1), f = ref(-1), h = ref(null), w = () => {
+      s.value = !0, a.value ? (t.value = u.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(a.value.toLowerCase()))), console.log(t.value), o.value = -1, f.value = -1) : t.value = u.originalData;
+    }, V = r, D = (e) => {
+      b.value = e;
+    }, _ = (e) => {
+      b.value = e, e && (a.value = e[u.showValue], s.value = !1), V("slectValue", e);
+    }, x = () => {
+      p.value == !1 && (s.value = !1);
+    }, R = () => {
+      p.value = !0;
+    }, S = () => {
+      p.value = !1;
+    }, O = (e) => {
+      if (console.log(e.key, "event.key "), t.value.length !== 0)
+        if (e.key == "ArrowDown") {
+          e.preventDefault();
+          let l = o.value + 1;
+          l >= t.value.length && (l = 0), console.log(l, "newIndex"), k(l);
+        } else if (e.key == "ArrowUp") {
+          e.preventDefault();
+          let l = o.value - 1;
+          l < 0 && (l = t.value.length - 1), k(l);
+        } else e.key === "Enter" && (e.preventDefault(), s.value == !0 ? E() : w());
+    }, E = () => {
+      if (o.value >= 0) {
+        f.value === o.value ? f.value = -1 : f.value = o.value;
+        const e = t.value;
+        console.log(e[o.value], o.value, "hh[currentHighlightIndex]"), _(t.value[o.value]);
+      }
+    }, k = (e) => {
+      o.value = e, nextTick(() => {
+        if (h.value && t.value.length > 0 && e >= 0 && e < t.value.length) {
+          const c = h.value.$el.querySelectorAll(".el-table__row");
+          console.log(c, "rows"), c.length > 0 && e < c.length && c[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), h.value.setCurrentRow(t.value[o.value]);
+        }
+      });
     };
-    return (t, m) => {
-      const R = c("el-table-column"), S = c("el-table"), T = c("el-option"), B = c("el-select");
-      return a(), f(B, {
-        modelValue: w(n),
-        "onUpdate:modelValue": m[0] || (m[0] = (o) => L(n) ? n.value = o : null),
-        filterable: "",
-        placeholder: "Select",
-        style: { width: "240px" }
-      }, {
-        default: p(() => [
-          (a(!0), _(h, null, b(e.originalData, (o) => (a(), f(T, {
-            key: o.name,
-            label: o.name,
-            value: o.name
+    return (e, l) => {
+      const c = d("el-input"), T = d("el-table-column"), L = d("el-table");
+      return g(), y("span", {
+        class: "spanInput",
+        onMouseover: R,
+        onMouseout: S
+      }, [
+        C(c, {
+          placeholder: "请输入搜索内容",
+          modelValue: m(a),
+          "onUpdate:modelValue": l[0] || (l[0] = (i) => A(a) ? a.value = i : null),
+          id: "filterInput",
+          onInput: w,
+          style: { width: "200px" },
+          onFocus: w,
+          onBlur: x,
+          onKeydown: O
+        }, null, 8, ["modelValue"]),
+        j(H("div", Q, [
+          C(L, {
+            ref_key: "singleTableRef",
+            ref: h,
+            border: "",
+            class: "spanInputTable",
+            "row-class-name": e.tableRowClassName,
+            "highlight-current-row": "",
+            data: m(t),
+            style: { width: "300px", height: "230px", position: "fixed" },
+            onCurrentChange: D,
+            onRowClick: _
           }, {
-            default: p(() => [
-              O(S, {
-                ref_for: !0,
-                ref_key: "singleTableRef",
-                ref: V,
-                border: "",
-                class: "spanInputTable",
-                "row-class-name": t.tableRowClassName,
-                "highlight-current-row": "",
-                data: w(v),
-                style: { width: "300px", height: "230px", position: "fixed" },
-                onCurrentChange: y,
-                onRowClick: x
-              }, {
-                default: p(() => [
-                  (a(!0), _(h, null, b(e.columnList, (i, D) => (a(), f(R, {
-                    key: D,
-                    prop: i.prop,
-                    label: i.label,
-                    width: i.width,
-                    "show-overflow-tooltip": "",
-                    align: "center"
-                  }, null, 8, ["prop", "label", "width"]))), 128))
-                ]),
-                _: 2
-              }, 1032, ["row-class-name", "data"])
+            default: N(() => [
+              (g(!0), y(F, null, K(n.columnList, (i, B) => (g(), U(T, {
+                key: B,
+                prop: i.prop,
+                label: i.label,
+                width: i.width,
+                "show-overflow-tooltip": "",
+                align: "center"
+              }, null, 8, ["prop", "label", "width"]))), 128))
             ]),
-            _: 2
-          }, 1032, ["label", "value"]))), 128))
-        ]),
-        _: 1
-      }, 8, ["modelValue"]);
+            _: 1
+          }, 8, ["row-class-name", "data"])
+        ], 512), [
+          [q, m(s)]
+        ])
+      ], 32);
     };
   }
-}), E = (e, l) => {
-  const r = e.__vccOpts || e;
-  for (const [n, u] of l)
-    r[n] = u;
-  return r;
-}, s = /* @__PURE__ */ E(j, [["__scopeId", "data-v-3cde86ca"]]);
-s.install = (e) => {
-  e.component(s.name, s);
+}), z = (n, r) => {
+  const u = n.__vccOpts || n;
+  for (const [a, s] of r)
+    u[a] = s;
+  return u;
+}, v = /* @__PURE__ */ z($, [["__scopeId", "data-v-2d4704ea"]]);
+v.install = (n) => {
+  n.component(v.name, v);
 };
-const N = [
-  s
-], g = function(e) {
-  g.installed || N.forEach((l) => {
-    e.component(l.name, l);
+const G = [
+  v
+], I = function(n) {
+  I.installed || G.forEach((r) => {
+    n.component(r.name, r);
   });
 };
-typeof window < "u" && window.Vue && g(window.Vue);
+typeof window < "u" && window.Vue && I(window.Vue);
 export {
-  s as SelectTable,
-  g as install
+  v as SelectTable,
+  I as install
 };

package/dist/huiyi-select-table.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.HuiyiSelectTable={},n.Vue))})(this,(function(n,e){"use strict";const a=((t,o)=>{const s=t.__vccOpts||t;for(const[c,f]of o)s[c]=f;return s})(e.defineComponent({name:"InputSelectCom",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(t,{emit:o}){const s=t,c=ref(""),f=ref(""),_=ref(!1),h=ref([]),d=ref([]);ref(!1),ref(-1),ref(-1);const w=ref(null),b=o,k=l=>{d.value=l},C=l=>{d.value=l,l&&(f.value=l[s.showValue],_.value=!1),b("slectValue",l)};return(l,u)=>{const g=e.resolveComponent("el-table-column"),y=e.resolveComponent("el-table"),V=e.resolveComponent("el-option"),x=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(x,{modelValue:e.unref(c),"onUpdate:modelValue":u[0]||(u[0]=r=>e.isRef(c)?c.value=r:null),filterable:"",placeholder:"Select",style:{width:"240px"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.originalData,r=>(e.openBlock(),e.createBlock(V,{key:r.name,label:r.name,value:r.name},{default:e.withCtx(()=>[e.createVNode(y,{ref_for:!0,ref_key:"singleTableRef",ref:w,border:"",class:"spanInputTable","row-class-name":l.tableRowClassName,"highlight-current-row":"",data:e.unref(h),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:k,onRowClick:C},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columnList,(p,B)=>(e.openBlock(),e.createBlock(g,{key:B,prop:p.prop,label:p.label,width:p.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:2},1032,["row-class-name","data"])]),_:2},1032,["label","value"]))),128))]),_:1},8,["modelValue"])}}}),[["__scopeId","data-v-3cde86ca"]]);a.install=t=>{t.component(a.name,a)};const m=[a],i=function(t){i.installed||m.forEach(o=>{t.component(o.name,o)})};typeof window<"u"&&window.Vue&&i(window.Vue),n.SelectTable=a,n.install=i,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+(function(s,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(s=typeof globalThis<"u"?globalThis:s||self,l(s.HuiyiSelectTable={},s.Vue))})(this,(function(s,l){"use strict";const k={class:"spanDiv"},p=((a,u)=>{const i=a.__vccOpts||a;for(const[r,c]of u)i[r]=c;return i})(l.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(a,{emit:u}){const i=a,r=ref(""),c=ref(!1),n=ref([]),b=ref([]),g=ref(!1),o=ref(-1),h=ref(-1),w=ref(null),v=()=>{c.value=!0,r.value?(n.value=i.originalData.filter(e=>Object.keys(e).some(t=>String(e[t]).toLowerCase().includes(r.value.toLowerCase()))),console.log(n.value),o.value=-1,h.value=-1):n.value=i.originalData},I=u,V=e=>{b.value=e},_=e=>{b.value=e,e&&(r.value=e[i.showValue],c.value=!1),I("slectValue",e)},S=()=>{g.value==!1&&(c.value=!1)},x=()=>{g.value=!0},D=()=>{g.value=!1},T=e=>{if(console.log(e.key,"event.key "),n.value.length!==0)if(e.key=="ArrowDown"){e.preventDefault();let t=o.value+1;t>=n.value.length&&(t=0),console.log(t,"newIndex"),y(t)}else if(e.key=="ArrowUp"){e.preventDefault();let t=o.value-1;t<0&&(t=n.value.length-1),y(t)}else e.key==="Enter"&&(e.preventDefault(),c.value==!0?R():v())},R=()=>{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]"),_(n.value[o.value])}},y=e=>{o.value=e,nextTick(()=>{if(w.value&&n.value.length>0&&e>=0&&e<n.value.length){const f=w.value.$el.querySelectorAll(".el-table__row");console.log(f,"rows"),f.length>0&&e<f.length&&f[e].scrollIntoView({behavior:"smooth",block:"nearest"}),w.value.setCurrentRow(n.value[o.value])}})};return(e,t)=>{const f=l.resolveComponent("el-input"),O=l.resolveComponent("el-table-column"),B=l.resolveComponent("el-table");return l.openBlock(),l.createElementBlock("span",{class:"spanInput",onMouseover:x,onMouseout:D},[l.createVNode(f,{placeholder:"请输入搜索内容",modelValue:l.unref(r),"onUpdate:modelValue":t[0]||(t[0]=d=>l.isRef(r)?r.value=d:null),id:"filterInput",onInput:v,style:{width:"200px"},onFocus:v,onBlur:S,onKeydown:T},null,8,["modelValue"]),l.withDirectives(l.createElementVNode("div",k,[l.createVNode(B,{ref_key:"singleTableRef",ref:w,border:"",class:"spanInputTable","row-class-name":e.tableRowClassName,"highlight-current-row":"",data:l.unref(n),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:V,onRowClick:_},{default:l.withCtx(()=>[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(a.columnList,(d,E)=>(l.openBlock(),l.createBlock(O,{key:E,prop:d.prop,label:d.label,width:d.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:1},8,["row-class-name","data"])],512),[[l.vShow,l.unref(c)]])],32)}}}),[["__scopeId","data-v-2d4704ea"]]);p.install=a=>{a.component(p.name,p)};const C=[p],m=function(a){m.installed||C.forEach(u=>{a.component(u.name,u)})};typeof window<"u"&&window.Vue&&m(window.Vue),s.SelectTable=p,s.install=m,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huiyi-select-table",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "select,table",
   "types": "dist/index.d.ts",
   "main": "dist/huiyi-select-table.umd.js",