huiyi-select-table 0.0.7 → 0.0.8

package/huiyi-select-table.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as L, resolveComponent as c, createBlock as f, openBlock as a, unref as _, isRef as O, withCtx as d, createElementBlock as h, Fragment as b, renderList as g, createVNode as j } from "vue";
-const E = /* @__PURE__ */ L({
-  name: "InputSelectCom",
+import { defineComponent as M, resolveComponent as w, openBlock as g, createElementBlock as x, createVNode as I, unref as _, isRef as j, withDirectives as A, createElementVNode as H, withCtx as F, Fragment as K, renderList as N, createBlock as U, vShow as q } from "vue";
+const Q = { class: "spanDiv" }, $ = /* @__PURE__ */ M({
+  name: "InputSelectCompont",
   __name: "SelectTable",
   props: {
     originalData: Object,
@@ -8,88 +8,120 @@ const E = /* @__PURE__ */ L({
     columnList: Object
   },
   emits: ["slectValue"],
-  setup(e, { emit: l }) {
-    const r = e, n = ref(""), u = ref(""), v = ref(!1), V = ref([]), m = ref([]);
-    ref(!1), ref(-1), ref(-1);
-    const k = ref(null), x = l, y = (t) => {
-      m.value = t;
-    }, R = (t) => {
-      m.value = t, t && (u.value = t[r.showValue], v.value = !1), x("slectValue", t);
+  setup(o, { emit: u }) {
+    const r = o, a = ref(""), s = ref(!1), t = ref([]), b = ref([]), p = ref(!1), n = ref(-1), v = ref(-1), h = ref(null), d = () => {
+      s.value = !0, a.value ? (t.value = r.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(a.value.toLowerCase()))), console.log(t.value), n.value = -1, v.value = -1) : t.value = r.originalData;
+    }, C = u, D = (e) => {
+      b.value = e;
+    }, y = (e) => {
+      b.value = e, e && (a.value = e[r.showValue], s.value = !1), C("slectValue", e);
+    }, V = () => {
+      p.value == !1 && (s.value = !1);
+    }, S = () => {
+      p.value = !0;
+    }, R = () => {
+      p.value = !1;
+    }, T = (e) => {
+      if (console.log(e.key, "event.key "), t.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);
+        } else if (e.key == "ArrowUp") {
+          e.preventDefault();
+          let l = n.value - 1;
+          l < 0 && (l = t.value.length - 1), k(l);
+        } else
+          e.key === "Enter" && (e.preventDefault(), s.value == !0 ? O() : d());
+    }, O = () => {
+      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]"), y(t.value[n.value]);
+      }
+    }, k = (e) => {
+      n.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[n.value]);
+        }
+      });
     };
-    return (t, w) => {
-      const S = c("el-table-column"), T = c("el-table"), B = c("el-option"), D = c("el-select");
-      return a(), f(D, {
-        modelValue: _(n),
-        "onUpdate:modelValue": w[0] || (w[0] = (o) => O(n) ? n.value = o : null),
-        filterable: "",
-        placeholder: "Select",
-        style: { width: "240px" }
-      }, {
-        default: d(() => [
-          (a(!0), h(b, null, g(e.originalData, (o) => (a(), f(B, {
-            key: o.name,
-            label: o.name,
-            value: o.name
+    return (e, l) => {
+      const c = w("el-input"), E = w("el-table-column"), L = w("el-table");
+      return g(), x("span", {
+        class: "spanInput",
+        onMouseover: S,
+        onMouseout: R
+      }, [
+        I(c, {
+          placeholder: "请输入搜索内容",
+          modelValue: _(a),
+          "onUpdate:modelValue": l[0] || (l[0] = (i) => j(a) ? a.value = i : null),
+          id: "filterInput",
+          onInput: d,
+          style: { width: "200px" },
+          onFocus: d,
+          onBlur: V,
+          onKeydown: T
+        }, null, 8, ["modelValue"]),
+        A(H("div", Q, [
+          I(L, {
+            ref_key: "singleTableRef",
+            ref: h,
+            border: "",
+            class: "spanInputTable",
+            "row-class-name": o.originalData,
+            "highlight-current-row": "",
+            data: _(t),
+            style: { width: "300px", height: "230px", position: "fixed" },
+            onCurrentChange: D,
+            onRowClick: y
           }, {
-            default: d(() => [
-              j(T, {
-                ref_for: !0,
-                ref_key: "singleTableRef",
-                ref: k,
-                border: "",
-                class: "spanInputTable",
-                "row-class-name": t.tableRowClassName,
-                "highlight-current-row": "",
-                data: _(V),
-                style: { width: "300px", height: "230px", position: "fixed" },
-                onCurrentChange: y,
-                onRowClick: R
-              }, {
-                default: d(() => [
-                  (a(!0), h(b, null, g(e.columnList, (i, I) => (a(), f(S, {
-                    key: I,
-                    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: F(() => [
+              (g(!0), x(K, null, N(o.columnList, (i, B) => (g(), U(E, {
+                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, _(s)]
+        ])
+      ], 32);
     };
   }
-}), N = (e, l) => {
-  const r = e.__vccOpts || e;
-  for (const [n, u] of l)
-    r[n] = u;
+});
+const z = (o, u) => {
+  const r = o.__vccOpts || o;
+  for (const [a, s] of u)
+    r[a] = s;
   return r;
-}, s = /* @__PURE__ */ N(E, [["__scopeId", "data-v-3cde86ca"]]);
-s.install = (e) => {
-  e.component(s.name, s);
+}, f = /* @__PURE__ */ z($, [["__scopeId", "data-v-e18f660a"]]);
+f.install = (o) => {
+  o.component(f.name, f);
 };
-const C = [
-  s
-], p = function(e) {
-  p.installed || C.forEach((l) => {
-    e.component(l.name, l);
+const G = [
+  f
+], m = function(o) {
+  m.installed || G.forEach((u) => {
+    o.component(u.name, u);
   });
 };
-typeof window < "u" && window.Vue && p(window.Vue);
-const Q = {
+typeof window < "u" && window.Vue && m(window.Vue);
+const P = {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-  install: p,
+  install: m,
   // 以下是具体的组件列表
-  ...C
+  SelectTable: f
 };
 export {
-  s as SelectTable,
-  Q as default,
-  p as install
+  f as SelectTable,
+  P as default,
+  m as install
 };

package/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 i=t.__vccOpts||t;for(const[c,f]of o)i[c]=f;return i})(e.defineComponent({name:"InputSelectCom",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(t,{emit:o}){const i=t,c=ref(""),f=ref(""),h=ref(!1),w=ref([]),u=ref([]);ref(!1),ref(-1),ref(-1);const b=ref(null),k=o,C=l=>{u.value=l},g=l=>{u.value=l,l&&(f.value=l[i.showValue],h.value=!1),k("slectValue",l)};return(l,m)=>{const y=e.resolveComponent("el-table-column"),V=e.resolveComponent("el-table"),x=e.resolveComponent("el-option"),B=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(B,{modelValue:e.unref(c),"onUpdate:modelValue":m[0]||(m[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(x,{key:r.name,label:r.name,value:r.name},{default:e.withCtx(()=>[e.createVNode(V,{ref_for:!0,ref_key:"singleTableRef",ref:b,border:"",class:"spanInputTable","row-class-name":l.tableRowClassName,"highlight-current-row":"",data:e.unref(w),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:C,onRowClick:g},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columnList,(d,S)=>(e.openBlock(),e.createBlock(y,{key:S,prop:d.prop,label:d.label,width:d.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 p=[a],s=function(t){s.installed||p.forEach(o=>{t.component(o.name,o)})};typeof window<"u"&&window.Vue&&s(window.Vue);const _={install:s,...p};n.SelectTable=a,n.default=_,n.install=s,Object.defineProperties(n,{__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="",k={class:"spanDiv"},C=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(a,{emit:i}){const f=a,r=ref(""),c=ref(!1),n=ref([]),m=ref([]),g=ref(!1),o=ref(-1),w=ref(-1),_=ref(null),v=()=>{c.value=!0,r.value?(n.value=f.originalData.filter(l=>Object.keys(l).some(t=>String(l[t]).toLowerCase().includes(r.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&&(r.value=l[f.showValue],c.value=!1),I("slectValue",l)},T=()=>{g.value==!1&&(c.value=!1)},D=()=>{g.value=!0},R=()=>{g.value=!1},O=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(),c.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:"spanInput",onMouseover:D,onMouseout:R},[e.createVNode(d,{placeholder:"请输入搜索内容",modelValue:e.unref(r),"onUpdate:modelValue":t[0]||(t[0]=p=>e.isRef(r)?r.value=p:null),id:"filterInput",onInput:v,style:{width:"200px"},onFocus:v,onBlur:T,onKeydown:O},null,8,["modelValue"]),e.withDirectives(e.createElementVNode("div",k,[e.createVNode(M,{ref_key:"singleTableRef",ref:_,border:"",class:"spanInputTable","row-class-name":a.originalData,"highlight-current-row":"",data:e.unref(n),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,(p,j)=>(e.openBlock(),e.createBlock(E,{key:j,prop:p.prop,label:p.label,width:p.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:1},8,["row-class-name","data"])],512),[[e.vShow,e.unref(c)]])],32)}}}),H="",u=((a,i)=>{const f=a.__vccOpts||a;for(const[r,c]of i)f[r]=c;return f})(C,[["__scopeId","data-v-e18f660a"]]);u.install=a=>{a.component(u.name,u)};const S=[u],h=function(a){h.installed||S.forEach(i=>{a.component(i.name,i)})};typeof window<"u"&&window.Vue&&h(window.Vue);const x={install:h,SelectTable:u};s.SelectTable=u,s.default=x,s.install=h,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "huiyi-select-table",
-  "version": "0.0.7",
-  "description": "A Vue.js time range picker component",
-  "main": "huiyi-select-table.umd.min.js",
-  "module": "huiyi-select-table.common.js",
-  "unpkg": "huiyi-select-table.umd.min.js",
-  "browser": "huiyi-select-table.umd.min.js",
+  "version": "0.0.8",
+  "description": "A Vue.js select table component",
+  "main": "huiyi-select-table.umd.js",
+  "module": "huiyi-select-table.mjs",
+  "unpkg": "huiyi-select-table.umd.js",
+  "browser": "huiyi-select-table.umd.js",
   "keywords": [
     "vue",
     "component",
-    "time-picker",
-    "date-range"
+    "select-table"
   ],
   "author": "Time Components Up",
   "license": "MIT",

package/style.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-e18f660a]{--el-table-tr-bg-color: #141}.spanInput[data-v-e18f660a]{display:inline-block;position:relative}.spanDiv[data-v-e18f660a]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}