huiyi-select-table 0.1.0 → 0.1.15

package/huiyi-select-table.mjs

@@ -1,89 +1,109 @@
-import { defineComponent as M, ref as a, resolveComponent as g, openBlock as _, createElementBlock as x, createVNode as I, withDirectives as j, createElementVNode as A, withCtx as H, Fragment as F, renderList as K, createBlock as N, vShow as U } from "vue";
-const q = { class: "huiyi-select-spanDiv" }, Q = /* @__PURE__ */ M({
+import { defineComponent as B, ref as u, resolveComponent as p, openBlock as m, createElementBlock as C, createVNode as _, withDirectives as M, createElementVNode as j, withCtx as A, Fragment as H, renderList as Q, createBlock as F, vShow as K } from "vue";
+const N = { class: "huiyi-select-spanDiv" }, U = /* @__PURE__ */ B({
   name: "InputSelectCompont",
   __name: "SelectTable",
   props: {
     originalData: Object,
     showValue: String,
-    columnList: Object
+    columnList: Object,
+    searchQueryInit: String,
+    labelIndex: String,
+    isRead: !1,
+    isRequired: !1,
+    isIndex: 1
   },
   emits: ["slectValue"],
-  setup(o, { emit: c }) {
-    const r = o, s = a(""), u = a(!1), t = a([]), b = a([]), d = a(!1), n = a(-1), f = a(-1), p = a(null), w = () => {
-      u.value = !0, s.value ? (t.value = r.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(s.value.toLowerCase()))), console.log(t.value), n.value = -1, f.value = -1) : t.value = r.originalData;
-    }, C = c, D = (e) => {
-      b.value = e;
-    }, y = (e) => {
-      b.value = e, e && (s.value = e[r.showValue], u.value = !1), C("slectValue", e);
-    }, V = () => {
-      d.value == !1 && (u.value = !1);
+  setup(t, { emit: i }) {
+    const a = t, s = u("");
+    s.value = a.searchQueryInit;
+    const r = u(!1), n = u([]), y = u([]), w = u(!1), o = u(-1), h = u(-1), f = u(null), g = () => {
+      r.value = !0, s.value ? (n.value = a.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 = a.originalData;
+    }, D = i, R = (e) => {
+      y.value = e;
+    }, I = (e) => {
+      y.value = e, e && (s.value = e[a.showValue], r.value = !1);
+      let l = {
+        val: e,
+        isIndex: a.isIndex
+      };
+      D("slectValue", l);
     }, S = () => {
-      d.value = !0;
-    }, R = () => {
-      d.value = !1;
-    }, T = (e) => {
-      if (console.log(e.key, "event.key "), t.value.length !== 0)
+      w.value == !1 && (r.value = !1);
+    }, V = () => {
+      w.value = !0;
+    }, T = () => {
+      w.value = !1;
+    }, O = (e) => {
+      if (console.log(e.key, "event.key "), n.value.length !== 0)
         if (e.key == "ArrowDown") {
           e.preventDefault();
-          let l = n.value + 1;
-          l >= t.value.length && (l = 0), console.log(l, "newIndex"), k(l);
+          let l = o.value + 1;
+          l >= n.value.length && (l = 0), console.log(l, "newIndex"), x(l);
         } else if (e.key == "ArrowUp") {
           e.preventDefault();
-          let l = n.value - 1;
-          l < 0 && (l = t.value.length - 1), k(l);
+          let l = o.value - 1;
+          l < 0 && (l = n.value.length - 1), x(l);
         } else
-          e.key === "Enter" && (e.preventDefault(), u.value == !0 ? O() : w());
-    }, O = () => {
-      if (n.value >= 0) {
-        f.value === n.value ? f.value = -1 : f.value = n.value;
-        const e = t.value;
-        console.log(e[n.value], n.value, "hh[currentHighlightIndex]"), y(t.value[n.value]);
+          e.key === "Enter" && (e.preventDefault(), r.value == !0 ? E() : g());
+    }, 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]"), I(n.value[o.value]);
       }
-    }, k = (e) => {
-      n.value = e, nextTick(() => {
-        if (p.value && t.value.length > 0 && e >= 0 && e < t.value.length) {
-          const i = p.value.$el.querySelectorAll(".el-table__row");
-          console.log(i, "rows"), i.length > 0 && e < i.length && i[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), p.value.setCurrentRow(t.value[n.value]);
+    }, x = (e) => {
+      o.value = e, nextTick(() => {
+        if (f.value && n.value.length > 0 && e >= 0 && e < n.value.length) {
+          const c = f.value.$el.querySelectorAll(".el-table__row");
+          console.log(c, "rows"), c.length > 0 && e < c.length && c[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), f.value.setCurrentRow(n.value[o.value]);
         }
       });
     };
     return (e, l) => {
-      const i = g("el-input"), E = g("el-table-column"), L = g("el-table");
-      return _(), x("span", {
+      const c = p("el-input"), k = p("el-table-column"), q = p("el-table");
+      return m(), C("span", {
         class: "huiyi-select-spanInput",
-        onMouseover: S,
-        onMouseout: R
+        onMouseover: V,
+        onMouseout: T
       }, [
-        I(i, {
+        _(c, {
           placeholder: "请输入搜索内容",
           modelValue: s.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (v) => s.value = v),
+          "onUpdate:modelValue": l[0] || (l[0] = (d) => s.value = d),
           id: "filterInput",
-          onInput: w,
+          onInput: g,
           style: { width: "200px" },
-          onFocus: w,
-          onBlur: V,
-          onKeydown: T
-        }, null, 8, ["modelValue"]),
-        j(A("div", q, [
-          I(L, {
+          readonly: t.isRead,
+          required: t.isRequired,
+          onFocus: g,
+          onBlur: S,
+          onKeydown: O
+        }, null, 8, ["modelValue", "readonly", "required"]),
+        M(j("div", N, [
+          _(q, {
             ref_key: "singleTableRef",
-            ref: p,
+            ref: f,
             border: "",
             class: "huiyi-select-spanInputTable",
-            "row-class-name": o.originalData,
+            "row-class-name": t.originalData,
             "highlight-current-row": "",
-            data: t.value,
+            data: n.value,
             style: { width: "300px", height: "230px", position: "fixed" },
-            onCurrentChange: D,
-            onRowClick: y
+            onCurrentChange: R,
+            onRowClick: I
           }, {
-            default: H(() => [
-              (_(!0), x(F, null, K(o.columnList, (v, B) => (_(), N(E, {
-                key: B,
-                prop: v.prop,
-                label: v.label,
-                width: v.width,
+            default: A(() => [
+              _(k, {
+                label: t.labelIndex,
+                type: "index",
+                align: "center",
+                width: "45"
+              }, null, 8, ["label"]),
+              (m(!0), C(H, null, Q(t.columnList, (d, L) => (m(), F(k, {
+                key: L,
+                prop: d.prop,
+                label: d.label,
+                width: d.width,
                 "show-overflow-tooltip": "",
                 align: "center"
               }, null, 8, ["prop", "label", "width"]))), 128))
@@ -91,37 +111,37 @@ const q = { class: "huiyi-select-spanDiv" }, Q = /* @__PURE__ */ M({
             _: 1
           }, 8, ["row-class-name", "data"])
         ], 512), [
-          [U, u.value]
+          [K, r.value && !t.isRead]
         ])
       ], 32);
     };
   }
 });
-const $ = (o, c) => {
-  const r = o.__vccOpts || o;
-  for (const [s, u] of c)
-    r[s] = u;
-  return r;
-}, h = /* @__PURE__ */ $(Q, [["__scopeId", "data-v-2055c2bf"]]);
-h.install = (o) => {
-  o.component(h.name, h);
+const $ = (t, i) => {
+  const a = t.__vccOpts || t;
+  for (const [s, r] of i)
+    a[s] = r;
+  return a;
+}, v = /* @__PURE__ */ $(U, [["__scopeId", "data-v-5387d170"]]);
+v.install = (t) => {
+  t.component(v.name, v);
 };
 const z = [
-  h
-], m = function(o) {
-  m.installed || z.forEach((c) => {
-    o.component(c.name, c);
+  v
+], b = function(t) {
+  b.installed || z.forEach((i) => {
+    t.component(i.name, i);
   });
 };
-typeof window < "u" && window.Vue && m(window.Vue);
+typeof window < "u" && window.Vue && b(window.Vue);
 const J = {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-  install: m,
+  install: b,
   // 以下是具体的组件列表
-  SelectTable: h
+  SelectTable: v
 };
 export {
-  h as SelectTable,
+  v as SelectTable,
   J as default,
-  m as install
+  b 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 L="",k={class:"huiyi-select-spanDiv"},C=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(a,{emit:i}){const f=a,c=e.ref(""),r=e.ref(!1),n=e.ref([]),m=e.ref([]),g=e.ref(!1),o=e.ref(-1),w=e.ref(-1),_=e.ref(null),v=()=>{r.value=!0,c.value?(n.value=f.originalData.filter(l=>Object.keys(l).some(t=>String(l[t]).toLowerCase().includes(c.value.toLowerCase()))),console.log(n.value),o.value=-1,w.value=-1):n.value=f.originalData},I=i,V=l=>{m.value=l},b=l=>{m.value=l,l&&(c.value=l[f.showValue],r.value=!1),I("slectValue",l)},T=()=>{g.value==!1&&(r.value=!1)},D=()=>{g.value=!0},O=()=>{g.value=!1},R=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"),y(t)}else if(l.key=="ArrowUp"){l.preventDefault();let t=o.value-1;t<0&&(t=n.value.length-1),y(t)}else l.key==="Enter"&&(l.preventDefault(),r.value==!0?B():v())},B=()=>{if(o.value>=0){w.value===o.value?w.value=-1:w.value=o.value;const l=n.value;console.log(l[o.value],o.value,"hh[currentHighlightIndex]"),b(n.value[o.value])}},y=l=>{o.value=l,nextTick(()=>{if(_.value&&n.value.length>0&&l>=0&&l<n.value.length){const d=_.value.$el.querySelectorAll(".el-table__row");console.log(d,"rows"),d.length>0&&l<d.length&&d[l].scrollIntoView({behavior:"smooth",block:"nearest"}),_.value.setCurrentRow(n.value[o.value])}})};return(l,t)=>{const d=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:O},[e.createVNode(d,{placeholder:"请输入搜索内容",modelValue:c.value,"onUpdate:modelValue":t[0]||(t[0]=h=>c.value=h),id:"filterInput",onInput:v,style:{width:"200px"},onFocus:v,onBlur:T,onKeydown:R},null,8,["modelValue"]),e.withDirectives(e.createElementVNode("div",k,[e.createVNode(M,{ref_key:"singleTableRef",ref:_,border:"",class:"huiyi-select-spanInputTable","row-class-name":a.originalData,"highlight-current-row":"",data:n.value,style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:V,onRowClick:b},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columnList,(h,j)=>(e.openBlock(),e.createBlock(E,{key:j,prop:h.prop,label:h.label,width:h.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:1},8,["row-class-name","data"])],512),[[e.vShow,r.value]])],32)}}}),H="",u=((a,i)=>{const f=a.__vccOpts||a;for(const[c,r]of i)f[c]=r;return f})(C,[["__scopeId","data-v-2055c2bf"]]);u.install=a=>{a.component(u.name,u)};const S=[u],p=function(a){p.installed||S.forEach(i=>{a.component(i.name,i)})};typeof window<"u"&&window.Vue&&p(window.Vue);const x={install:p,SelectTable:u};s.SelectTable=u,s.default=x,s.install=p,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 j="",x={class:"huiyi-select-spanDiv"},k=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:d}){const i=n,r=e.ref("");r.value=i.searchQueryInit;const c=e.ref(!1),o=e.ref([]),_=e.ref([]),v=e.ref(!1),a=e.ref(-1),w=e.ref(-1),g=e.ref(null),m=()=>{c.value=!0,r.value?(o.value=i.originalData.filter(l=>Object.keys(l).some(t=>String(l[t]).toLowerCase().includes(r.value.toLowerCase()))),console.log(o.value),a.value=-1,w.value=-1):o.value=i.originalData},C=d,D=l=>{_.value=l},b=l=>{_.value=l,l&&(r.value=l[i.showValue],c.value=!1);let t={val:l,isIndex:i.isIndex};C("slectValue",t)},R=()=>{v.value==!1&&(c.value=!1)},T=()=>{v.value=!0},O=()=>{v.value=!1},B=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"),y(t)}else if(l.key=="ArrowUp"){l.preventDefault();let t=a.value-1;t<0&&(t=o.value.length-1),y(t)}else l.key==="Enter"&&(l.preventDefault(),c.value==!0?E():m())},E=()=>{if(a.value>=0){w.value===a.value?w.value=-1:w.value=a.value;const l=o.value;console.log(l[a.value],a.value,"hh[currentHighlightIndex]"),b(o.value[a.value])}},y=l=>{a.value=l,nextTick(()=>{if(g.value&&o.value.length>0&&l>=0&&l<o.value.length){const f=g.value.$el.querySelectorAll(".el-table__row");console.log(f,"rows"),f.length>0&&l<f.length&&f[l].scrollIntoView({behavior:"smooth",block:"nearest"}),g.value.setCurrentRow(o.value[a.value])}})};return(l,t)=>{const f=e.resolveComponent("el-input"),I=e.resolveComponent("el-table-column"),q=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("span",{class:"huiyi-select-spanInput",onMouseover:T,onMouseout:O},[e.createVNode(f,{placeholder:"请输入搜索内容",modelValue:r.value,"onUpdate:modelValue":t[0]||(t[0]=h=>r.value=h),id:"filterInput",onInput:m,style:{width:"200px"},readonly:n.isRead,required:n.isRequired,onFocus:m,onBlur:R,onKeydown:B},null,8,["modelValue","readonly","required"]),e.withDirectives(e.createElementVNode("div",x,[e.createVNode(q,{ref_key:"singleTableRef",ref:g,border:"",class:"huiyi-select-spanInputTable","row-class-name":n.originalData,"highlight-current-row":"",data:o.value,style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:D,onRowClick:b},{default:e.withCtx(()=>[e.createVNode(I,{label:n.labelIndex,type:"index",align:"center",width:"45"},null,8,["label"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columnList,(h,M)=>(e.openBlock(),e.createBlock(I,{key:M,prop:h.prop,label:h.label,width:h.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:1},8,["row-class-name","data"])],512),[[e.vShow,c.value&&!n.isRead]])],32)}}}),L="",u=((n,d)=>{const i=n.__vccOpts||n;for(const[r,c]of d)i[r]=c;return i})(k,[["__scopeId","data-v-5387d170"]]);u.install=n=>{n.component(u.name,u)};const S=[u],p=function(n){p.installed||S.forEach(d=>{n.component(d.name,d)})};typeof window<"u"&&window.Vue&&p(window.Vue);const V={install:p,SelectTable:u};s.SelectTable=u,s.default=V,s.install=p,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huiyi-select-table",
-  "version": "0.1.0",
+  "version": "0.1.15",
   "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-2055c2bf]{--el-table-tr-bg-color: #141}.huiyi-select-spanInput[data-v-2055c2bf]{display:inline-block;position:relative}.huiyi-select-spanDiv[data-v-2055c2bf]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}
+.el-table .warning-row[data-v-5387d170]{--el-table-tr-bg-color: #141}.huiyi-select-spanInput[data-v-5387d170]{display:inline-block;position:relative}.huiyi-select-spanDiv[data-v-5387d170]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}