huiyi-select-table 0.1.22 → 0.1.24

package/huiyi-select-table.mjs

@@ -1,21 +1,21 @@
-import { defineComponent as K, openBlock as h, createElementBlock as V, createElementVNode as B, ref as i, watch as ee, onMounted as F, nextTick as g, computed as ne, onUnmounted as le, resolveComponent as R, createVNode as T, unref as y, isRef as te, withCtx as L, normalizeClass as oe, createBlock as E, Teleport as N, normalizeStyle as ae, Fragment as re, renderList as ue, createCommentVNode as q } from "vue";
+import { defineComponent as q, openBlock as L, createElementBlock as B, createElementVNode as D, ref as d, watch as Q, onMounted as O, nextTick as _, computed as Z, onUnmounted as ee, resolveComponent as C, createVNode as S, unref as x, isRef as ne, withCtx as V, normalizeClass as le, withDirectives as te, normalizeStyle as oe, Fragment as ae, renderList as re, createBlock as se, vShow as ue } from "vue";
 /*! Element Plus Icons Vue v2.3.2 */
-var se = /* @__PURE__ */ K({
+var ce = /* @__PURE__ */ q({
   name: "ArrowDown",
   __name: "arrow-down",
-  setup(u) {
-    return (f, _) => (h(), V("svg", {
+  setup(c) {
+    return (f, g) => (L(), B("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 1024 1024"
     }, [
-      B("path", {
+      D("path", {
         fill: "currentColor",
         d: "M831.872 340.864 512 652.672 192.128 340.864a30.59 30.59 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.59 30.59 0 0 0-42.752 0z"
       })
     ]));
   }
-}), ce = se;
-const ie = /* @__PURE__ */ K({
+}), ie = ce;
+const de = { class: "dropdown-overlay" }, fe = /* @__PURE__ */ q({
   name: "InputSelectCompont",
   __name: "SelectTable",
   props: {
@@ -30,250 +30,255 @@ const ie = /* @__PURE__ */ K({
     column: Array
   },
   emits: ["getInputRef", "handleChangeSelectValue"],
-  setup(u, { emit: f }) {
-    const _ = f, l = u;
-    let d = i(), p = i(""), C = i(), D = i(), r = i(!1), M = i({
+  setup(c, { emit: f }) {
+    const g = f, l = c;
+    let s = d(), p = d(""), k = d(), I = d(), u = d(!1), M = d({
       top: "0px",
-      left: "0px"
-      // width: "0px",
-    }), t = i(-1), b = i(!1), I = i(!1);
-    ee(
+      left: "0px",
+      minWidth: "100%"
+    }), o = d(-1), h = d(!1), T = d(!1);
+    Q(
       () => l.value,
       (e) => {
         p.value = e || "";
       },
       { immediate: !0 }
-    ), F(() => {
-      g(() => {
-        _("getInputRef", C.value);
+    ), O(() => {
+      _(() => {
+        g("getInputRef", k.value);
       });
     });
-    const k = () => {
-      if (!D.value)
+    const y = () => {
+      if (!I.value)
         return;
-      const e = D.value.getBoundingClientRect(), n = window.pageYOffset || document.documentElement.scrollTop, a = window.pageXOffset || document.documentElement.scrollLeft;
+      const e = I.value.getBoundingClientRect(), n = window.pageYOffset || document.documentElement.scrollTop, t = window.pageXOffset || document.documentElement.scrollLeft;
       M.value = {
         top: `${e.bottom + n}px`,
-        left: `${e.left + a}px`
+        left: `${e.left + t}px`
         // width: `${rect.width}px`,
       };
-    }, S = ne(() => {
-      const e = l.column?.map((c) => c.prop) || [
+    }, b = Z(() => {
+      const e = l.column?.map((r) => r.prop) || [
         "name",
         "engname",
         "spell",
         "zjm",
         "infoOrder"
-      ], n = l.options || [], a = p.value || "";
-      return t.value = -1, g(() => {
-        const c = l.options || [], w = c.find((m) => m.name === l.value);
-        if (d.value && d.value.setCurrentRow(w), w) {
-          const m = O(
+      ], n = l.options || [], t = p.value || "";
+      return o.value = -1, _(() => {
+        const r = l.options || [], w = r.find((m) => m.name === l.value);
+        if (s.value && s.value.setCurrentRow(w), w) {
+          const m = F(
             e,
-            a,
-            c
+            t,
+            r
           );
-          t.value = m.findIndex(
-            (o) => o.name === w.name
+          o.value = m.findIndex(
+            (a) => a.name === w.name
           );
         }
-      }), O(e, a, n);
-    }), U = (e) => {
-      e?.stopPropagation(), !l.readonly && (r.value ? s() : v());
-    }, Y = () => {
+      }), F(e, t, n);
+    }), K = (e) => {
+      e?.stopPropagation(), !l.readonly && (u.value ? i() : v());
+    }, N = () => {
       if (l.readonly) {
-        s();
+        i();
         return;
       }
-      r.value || v(), t.value = -1;
+      u.value ? E() : v(), o.value = -1;
     }, v = () => {
-      l.readonly || I.value || (I.value = !0, r.value = !0, g(() => {
-        k(), b.value = !1, setTimeout(() => {
-          I.value = !1;
+      l.readonly || T.value || (T.value = !0, u.value = !0, _(() => {
+        y(), h.value = !1, E(), setTimeout(() => {
+          T.value = !1;
         }, 100);
       }));
-    }, s = () => {
-      r.value = !1, b.value = !1;
+    }, i = () => {
+      u.value = !1, h.value = !1;
     }, z = (e) => {
-      p.value = e.name, s(), g(() => {
-        C.value?.focus();
-      }), _("handleChangeSelectValue", {
+      p.value = e.name, i(), _(() => {
+        k.value?.focus();
+      }), g("handleChangeSelectValue", {
         valueCode: e.code,
         value: e.name,
-        index: l.itemIndex ? l.itemIndex : ""
+        index: l.itemIndex ? l.itemIndex : "",
+        row: e
       });
-    }, $ = (e) => {
-      b.value = !0, e.preventDefault();
-    }, j = (e) => {
-      e.stopPropagation(), s();
-    }, H = async () => {
+    }, U = (e) => {
+      h.value = !0, e.preventDefault();
+    }, Y = (e) => {
+      e.stopPropagation(), i();
+    }, $ = async () => {
       if (console.log("handleInput"), l.readonly) {
-        s();
+        i();
         return;
       }
-      v(), t.value = -1;
-    }, X = () => {
+      v(), o.value = -1;
+    }, j = () => {
       if (console.log("handleFocus"), l.readonly) {
-        s();
+        i();
         return;
       }
-      r.value || v(), t.value = -1;
-    }, G = () => {
-      console.log("handleBlur", b.value), setTimeout(() => {
-        if (b.value) {
-          g(() => {
-            C.value?.focus();
+      console.log("handleFocus 111"), u.value ? E() : v(), o.value = -1;
+    }, H = () => {
+      console.log("handleBlur", h.value), setTimeout(() => {
+        if (h.value) {
+          _(() => {
+            k.value?.focus();
           });
           return;
         }
-        s();
+        i();
       }, 150);
-    }, J = (e) => {
-      S.value.length !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), r.value || v(), P(1)) : e.key === "ArrowUp" ? (e.preventDefault(), r.value || v(), P(-1)) : e.key === "Enter" ? (e.preventDefault(), r.value ? Q() : v()) : (e.key === "Escape" || e.key === "Tab") && s());
+    }, W = (e) => {
+      b.value.length !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), u.value || v(), P(1)) : e.key === "ArrowUp" ? (e.preventDefault(), u.value || v(), P(-1)) : e.key === "Enter" ? (e.preventDefault(), u.value ? X() : v()) : (e.key === "Escape" || e.key === "Tab") && i());
     }, P = (e) => {
-      const n = S.value;
+      const n = b.value;
       if (n.length === 0)
         return;
-      t.value === -1 ? e === 1 ? t.value = 0 : t.value = n.length - 1 : (t.value += e, t.value < 0 ? t.value = n.length - 1 : t.value >= n.length && (t.value = 0));
-      const a = n[t.value];
-      d.value && d.value.setCurrentRow(a), W();
-    }, Q = () => {
-      const e = S.value;
-      if (e.length === 0 || t.value === -1)
+      o.value === -1 ? e === 1 ? o.value = 0 : o.value = n.length - 1 : (o.value += e, o.value < 0 ? o.value = n.length - 1 : o.value >= n.length && (o.value = 0));
+      const t = n[o.value];
+      s.value && s.value.setCurrentRow(t), G();
+    }, X = () => {
+      const e = b.value;
+      if (e.length === 0 || o.value === -1)
         return;
-      const n = e[t.value];
+      const n = e[o.value];
       z(n);
-    }, W = () => {
-      g(() => {
-        const e = d.value;
+    }, G = () => {
+      _(() => {
+        const e = s.value;
         if (!e)
           return;
         const n = e.$el.querySelector(".el-table__body-wrapper");
         if (!n)
           return;
-        const a = n.querySelector(".current-row");
-        a && a.scrollIntoView({
+        const t = n.querySelector(".current-row");
+        t && t.scrollIntoView({
           behavior: "smooth",
           block: "nearest"
         });
       });
-    }, O = (e, n, a) => {
-      const c = n.trim().toLowerCase();
-      return c ? a.filter(
+    }, E = () => {
+      _(() => {
+        const n = (l.options || []).find((t) => t.name === l.value);
+        if (console.log("targetRow", n), s.value && s.value.setCurrentRow(n), n) {
+          const t = b.value;
+          o.value = t.findIndex(
+            (r) => r.name === n.name
+          );
+        }
+      });
+    }, F = (e, n, t) => {
+      const r = n.trim().toLowerCase();
+      return r ? t.filter(
         (w) => e.some((m) => {
-          const o = w[m];
-          return o == null && o !== 0 ? !1 : String(o).toLowerCase().includes(c);
+          const a = w[m];
+          return a == null && a !== 0 ? !1 : String(a).toLowerCase().includes(r);
         })
-      ) : a;
+      ) : t;
     };
-    return F(() => {
-      window.addEventListener("resize", k), window.addEventListener("scroll", k, !0);
-    }), le(() => {
-      window.removeEventListener("resize", k), window.removeEventListener("scroll", k, !0);
+    return O(() => {
+      window.addEventListener("resize", y), window.addEventListener("scroll", y, !0);
+    }), ee(() => {
+      window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0);
     }), (e, n) => {
-      const a = R("el-icon"), c = R("el-input"), w = R("el-table-column"), m = R("el-table");
-      return h(), V("div", {
+      const t = C("el-icon"), r = C("el-input"), w = C("el-table-column"), m = C("el-table");
+      return L(), B("div", {
         class: "custom-dropdown",
         ref_key: "dropdownRef",
-        ref: D
+        ref: I
       }, [
-        T(c, {
-          modelValue: y(p),
-          "onUpdate:modelValue": n[0] || (n[0] = (o) => te(p) ? p.value = o : p = o),
+        S(r, {
+          modelValue: x(p),
+          "onUpdate:modelValue": n[0] || (n[0] = (a) => ne(p) ? p.value = a : p = a),
           ref_key: "inputValueRef",
-          ref: C,
+          ref: k,
           readonly: l.readonly,
-          onInput: H,
-          onKeydown: J,
-          onFocus: X,
-          onBlur: G,
-          onClick: Y
+          onInput: $,
+          onKeydown: W,
+          onFocus: j,
+          onBlur: H,
+          onClick: N
         }, {
-          suffix: L(() => [
-            T(a, {
-              class: oe(["el-input__icon dropdown-arrow", { "dropdown-arrow--open": y(r) }]),
-              onClick: U
+          suffix: V(() => [
+            S(t, {
+              class: le(["el-input__icon dropdown-arrow", { "dropdown-arrow--open": x(u) }]),
+              onClick: K
             }, {
-              default: L(() => [
-                T(y(ce))
+              default: V(() => [
+                S(x(ie))
               ]),
               _: 1
             }, 8, ["class"])
           ]),
           _: 1
         }, 8, ["modelValue", "readonly"]),
-        y(r) ? (h(), E(N, {
-          key: 0,
-          to: "body"
-        }, [
-          B("div", {
+        te(D("div", de, [
+          D("div", {
             class: "dropdown-panel",
-            style: ae(y(M)),
-            onMousedown: $
+            style: oe(x(M)),
+            onMousedown: U
           }, [
-            T(m, {
+            S(m, {
               border: "",
-              data: S.value,
+              data: b.value,
               "highlight-current-row": "",
               ref_key: "tableRef",
-              ref: d,
+              ref: s,
               "max-height": "200px",
               onRowClick: z,
               style: { width: "100%" }
             }, {
-              default: L(() => [
-                (h(!0), V(re, null, ue(l.column, (o, Z) => (h(), E(w, {
-                  key: Z,
-                  prop: o.prop,
-                  label: o.label,
-                  width: o.width,
-                  align: o.align,
-                  type: o.type,
-                  "header-align": o.headerAlign
+              default: V(() => [
+                (L(!0), B(ae, null, re(l.column, (a, J) => (L(), se(w, {
+                  key: J,
+                  prop: a.prop,
+                  label: a.label,
+                  width: a.width,
+                  align: a.align,
+                  type: a.type,
+                  "header-align": a.headerAlign
                 }, null, 8, ["prop", "label", "width", "align", "type", "header-align"]))), 128))
               ]),
               _: 1
             }, 8, ["data"])
-          ], 36)
-        ])) : q("", !0),
-        y(r) ? (h(), E(N, {
-          key: 1,
-          to: "body"
-        }, [
-          B("div", {
+          ], 36),
+          D("div", {
             class: "dropdown-mask",
-            onMousedown: j
+            onMousedown: Y
           }, null, 32)
-        ])) : q("", !0)
+        ], 512), [
+          [ue, x(u)]
+        ])
       ], 512);
     };
   }
 });
-const de = (u, f) => {
-  const _ = u.__vccOpts || u;
-  for (const [l, d] of f)
-    _[l] = d;
-  return _;
-}, x = /* @__PURE__ */ de(ie, [["__scopeId", "data-v-2301dea2"]]);
-x.install = (u) => {
-  u.component(x.name, x);
+const pe = (c, f) => {
+  const g = c.__vccOpts || c;
+  for (const [l, s] of f)
+    g[l] = s;
+  return g;
+}, R = /* @__PURE__ */ pe(fe, [["__scopeId", "data-v-398878f9"]]);
+R.install = (c) => {
+  c.component(R.name, R);
 };
-const fe = [
-  x
-], A = function(u) {
-  A.installed || fe.forEach((f) => {
-    u.component(f.name, f);
+const ve = [
+  R
+], A = function(c) {
+  A.installed || ve.forEach((f) => {
+    c.component(f.name, f);
   });
 };
 typeof window < "u" && window.Vue && A(window.Vue);
-const ve = {
+const me = {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install: A,
   // 以下是具体的组件列表
-  SelectTable: x
+  SelectTable: R
 };
 export {
-  x as SelectTable,
-  ve as default,
+  R as SelectTable,
+  me as default,
   A as install
 };

package/huiyi-select-table.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.HuiyiSelectTable={},c.Vue))})(this,function(c,e){"use strict";const $="";/*! Element Plus Icons Vue v2.3.2 */var D=e.defineComponent({name:"ArrowDown",__name:"arrow-down",setup(i){return(p,g)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M831.872 340.864 512 652.672 192.128 340.864a30.59 30.59 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.59 30.59 0 0 0-42.752 0z"})]))}}),I=D;const L=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{options:Array,readonly:Boolean,required:Boolean,value:String,itemIndex:{type:[String,Number,null],default:null},column:Array},emits:["getInputRef","handleChangeSelectValue"],setup(i,{emit:p}){const g=p,o=i;let f=e.ref(),m=e.ref(""),C=e.ref(),S=e.ref(),s=e.ref(!1),B=e.ref({top:"0px",left:"0px"}),l=e.ref(-1),k=e.ref(!1),v=e.ref(!1);e.watch(()=>o.value,n=>{m.value=n||""},{immediate:!0}),e.onMounted(()=>{e.nextTick(()=>{g("getInputRef",C.value)})});const b=()=>{if(!S.value)return;const n=S.value.getBoundingClientRect(),t=window.pageYOffset||document.documentElement.scrollTop,r=window.pageXOffset||document.documentElement.scrollLeft;B.value={top:`${n.bottom+t}px`,left:`${n.left+r}px`}},T=e.computed(()=>{const n=o.column?.map(u=>u.prop)||["name","engname","spell","zjm","infoOrder"],t=o.options||[],r=m.value||"";return l.value=-1,e.nextTick(()=>{const u=o.options||[],_=u.find(y=>y.name===o.value);if(f.value&&f.value.setCurrentRow(_),_){const y=E(n,r,u);l.value=y.findIndex(a=>a.name===_.name)}}),E(n,r,t)}),A=n=>{n?.stopPropagation(),!o.readonly&&(s.value?d():w())},P=()=>{if(o.readonly){d();return}s.value||w(),l.value=-1},w=()=>{o.readonly||v.value||(v.value=!0,s.value=!0,e.nextTick(()=>{b(),k.value=!1,setTimeout(()=>{v.value=!1},100)}))},d=()=>{s.value=!1,k.value=!1},R=n=>{m.value=n.name,d(),e.nextTick(()=>{C.value?.focus()}),g("handleChangeSelectValue",{valueCode:n.code,value:n.name,index:o.itemIndex?o.itemIndex:""})},z=n=>{k.value=!0,n.preventDefault()},O=n=>{n.stopPropagation(),d()},q=async()=>{if(console.log("handleInput"),o.readonly){d();return}w(),l.value=-1},F=()=>{if(console.log("handleFocus"),o.readonly){d();return}s.value||w(),l.value=-1},j=()=>{console.log("handleBlur",k.value),setTimeout(()=>{if(k.value){e.nextTick(()=>{C.value?.focus()});return}d()},150)},K=n=>{T.value.length!==0&&(n.key==="ArrowDown"?(n.preventDefault(),s.value||w(),V(1)):n.key==="ArrowUp"?(n.preventDefault(),s.value||w(),V(-1)):n.key==="Enter"?(n.preventDefault(),s.value?U():w()):(n.key==="Escape"||n.key==="Tab")&&d())},V=n=>{const t=T.value;if(t.length===0)return;l.value===-1?n===1?l.value=0:l.value=t.length-1:(l.value+=n,l.value<0?l.value=t.length-1:l.value>=t.length&&(l.value=0));const r=t[l.value];f.value&&f.value.setCurrentRow(r),H()},U=()=>{const n=T.value;if(n.length===0||l.value===-1)return;const t=n[l.value];R(t)},H=()=>{e.nextTick(()=>{const n=f.value;if(!n)return;const t=n.$el.querySelector(".el-table__body-wrapper");if(!t)return;const r=t.querySelector(".current-row");r&&r.scrollIntoView({behavior:"smooth",block:"nearest"})})},E=(n,t,r)=>{const u=t.trim().toLowerCase();return u?r.filter(_=>n.some(y=>{const a=_[y];return a==null&&a!==0?!1:String(a).toLowerCase().includes(u)})):r};return e.onMounted(()=>{window.addEventListener("resize",b),window.addEventListener("scroll",b,!0)}),e.onUnmounted(()=>{window.removeEventListener("resize",b),window.removeEventListener("scroll",b,!0)}),(n,t)=>{const r=e.resolveComponent("el-icon"),u=e.resolveComponent("el-input"),_=e.resolveComponent("el-table-column"),y=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("div",{class:"custom-dropdown",ref_key:"dropdownRef",ref:S},[e.createVNode(u,{modelValue:e.unref(m),"onUpdate:modelValue":t[0]||(t[0]=a=>e.isRef(m)?m.value=a:m=a),ref_key:"inputValueRef",ref:C,readonly:o.readonly,onInput:q,onKeydown:K,onFocus:F,onBlur:j,onClick:P},{suffix:e.withCtx(()=>[e.createVNode(r,{class:e.normalizeClass(["el-input__icon dropdown-arrow",{"dropdown-arrow--open":e.unref(s)}]),onClick:A},{default:e.withCtx(()=>[e.createVNode(e.unref(I))]),_:1},8,["class"])]),_:1},8,["modelValue","readonly"]),e.unref(s)?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:"body"},[e.createElementVNode("div",{class:"dropdown-panel",style:e.normalizeStyle(e.unref(B)),onMousedown:z},[e.createVNode(y,{border:"",data:T.value,"highlight-current-row":"",ref_key:"tableRef",ref:f,"max-height":"200px",onRowClick:R,style:{width:"100%"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.column,(a,Y)=>(e.openBlock(),e.createBlock(_,{key:Y,prop:a.prop,label:a.label,width:a.width,align:a.align,type:a.type,"header-align":a.headerAlign},null,8,["prop","label","width","align","type","header-align"]))),128))]),_:1},8,["data"])],36)])):e.createCommentVNode("",!0),e.unref(s)?(e.openBlock(),e.createBlock(e.Teleport,{key:1,to:"body"},[e.createElementVNode("div",{class:"dropdown-mask",onMousedown:O},null,32)])):e.createCommentVNode("",!0)],512)}}}),X="",h=((i,p)=>{const g=i.__vccOpts||i;for(const[o,f]of p)g[o]=f;return g})(L,[["__scopeId","data-v-2301dea2"]]);h.install=i=>{i.component(h.name,h)};const M=[h],x=function(i){x.installed||M.forEach(p=>{i.component(p.name,p)})};typeof window<"u"&&window.Vue&&x(window.Vue);const N={install:x,SelectTable:h};c.SelectTable=h,c.default=N,c.install=x,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.HuiyiSelectTable={},d.Vue))})(this,function(d,e){"use strict";const X="";/*! Element Plus Icons Vue v2.3.2 */var D=e.defineComponent({name:"ArrowDown",__name:"arrow-down",setup(u){return(p,y)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M831.872 340.864 512 652.672 192.128 340.864a30.59 30.59 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.59 30.59 0 0 0-42.752 0z"})]))}}),I=D;const M={class:"dropdown-overlay"},N=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{options:Array,readonly:Boolean,required:Boolean,value:String,itemIndex:{type:[String,Number,null],default:null},column:Array},emits:["getInputRef","handleChangeSelectValue"],setup(u,{emit:p}){const y=p,o=u;let c=e.ref(),m=e.ref(""),C=e.ref(),S=e.ref(),i=e.ref(!1),V=e.ref({top:"0px",left:"0px",minWidth:"100%"}),a=e.ref(-1),v=e.ref(!1),T=e.ref(!1);e.watch(()=>o.value,n=>{m.value=n||""},{immediate:!0}),e.onMounted(()=>{e.nextTick(()=>{y("getInputRef",C.value)})});const k=()=>{if(!S.value)return;const n=S.value.getBoundingClientRect(),t=window.pageYOffset||document.documentElement.scrollTop,l=window.pageXOffset||document.documentElement.scrollLeft;V.value={top:`${n.bottom+t}px`,left:`${n.left+l}px`}},x=e.computed(()=>{const n=o.column?.map(s=>s.prop)||["name","engname","spell","zjm","infoOrder"],t=o.options||[],l=m.value||"";return a.value=-1,e.nextTick(()=>{const s=o.options||[],_=s.find(h=>h.name===o.value);if(c.value&&c.value.setCurrentRow(_),_){const h=B(n,l,s);a.value=h.findIndex(r=>r.name===_.name)}}),B(n,l,t)}),z=n=>{n?.stopPropagation(),!o.readonly&&(i.value?f():w())},O=()=>{if(o.readonly){f();return}i.value?R():w(),a.value=-1},w=()=>{o.readonly||T.value||(T.value=!0,i.value=!0,e.nextTick(()=>{k(),v.value=!1,R(),setTimeout(()=>{T.value=!1},100)}))},f=()=>{i.value=!1,v.value=!1},E=n=>{m.value=n.name,f(),e.nextTick(()=>{C.value?.focus()}),y("handleChangeSelectValue",{valueCode:n.code,value:n.name,index:o.itemIndex?o.itemIndex:"",row:n})},F=n=>{v.value=!0,n.preventDefault()},q=n=>{n.stopPropagation(),f()},j=async()=>{if(console.log("handleInput"),o.readonly){f();return}w(),a.value=-1},K=()=>{if(console.log("handleFocus"),o.readonly){f();return}console.log("handleFocus 111"),i.value?R():w(),a.value=-1},U=()=>{console.log("handleBlur",v.value),setTimeout(()=>{if(v.value){e.nextTick(()=>{C.value?.focus()});return}f()},150)},H=n=>{x.value.length!==0&&(n.key==="ArrowDown"?(n.preventDefault(),i.value||w(),L(1)):n.key==="ArrowUp"?(n.preventDefault(),i.value||w(),L(-1)):n.key==="Enter"?(n.preventDefault(),i.value?Y():w()):(n.key==="Escape"||n.key==="Tab")&&f())},L=n=>{const t=x.value;if(t.length===0)return;a.value===-1?n===1?a.value=0:a.value=t.length-1:(a.value+=n,a.value<0?a.value=t.length-1:a.value>=t.length&&(a.value=0));const l=t[a.value];c.value&&c.value.setCurrentRow(l),$()},Y=()=>{const n=x.value;if(n.length===0||a.value===-1)return;const t=n[a.value];E(t)},$=()=>{e.nextTick(()=>{const n=c.value;if(!n)return;const t=n.$el.querySelector(".el-table__body-wrapper");if(!t)return;const l=t.querySelector(".current-row");l&&l.scrollIntoView({behavior:"smooth",block:"nearest"})})},R=()=>{e.nextTick(()=>{const t=(o.options||[]).find(l=>l.name===o.value);if(console.log("targetRow",t),c.value&&c.value.setCurrentRow(t),t){const l=x.value;a.value=l.findIndex(s=>s.name===t.name)}})},B=(n,t,l)=>{const s=t.trim().toLowerCase();return s?l.filter(_=>n.some(h=>{const r=_[h];return r==null&&r!==0?!1:String(r).toLowerCase().includes(s)})):l};return e.onMounted(()=>{window.addEventListener("resize",k),window.addEventListener("scroll",k,!0)}),e.onUnmounted(()=>{window.removeEventListener("resize",k),window.removeEventListener("scroll",k,!0)}),(n,t)=>{const l=e.resolveComponent("el-icon"),s=e.resolveComponent("el-input"),_=e.resolveComponent("el-table-column"),h=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("div",{class:"custom-dropdown",ref_key:"dropdownRef",ref:S},[e.createVNode(s,{modelValue:e.unref(m),"onUpdate:modelValue":t[0]||(t[0]=r=>e.isRef(m)?m.value=r:m=r),ref_key:"inputValueRef",ref:C,readonly:o.readonly,onInput:j,onKeydown:H,onFocus:K,onBlur:U,onClick:O},{suffix:e.withCtx(()=>[e.createVNode(l,{class:e.normalizeClass(["el-input__icon dropdown-arrow",{"dropdown-arrow--open":e.unref(i)}]),onClick:z},{default:e.withCtx(()=>[e.createVNode(e.unref(I))]),_:1},8,["class"])]),_:1},8,["modelValue","readonly"]),e.withDirectives(e.createElementVNode("div",M,[e.createElementVNode("div",{class:"dropdown-panel",style:e.normalizeStyle(e.unref(V)),onMousedown:F},[e.createVNode(h,{border:"",data:x.value,"highlight-current-row":"",ref_key:"tableRef",ref:c,"max-height":"200px",onRowClick:E,style:{width:"100%"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.column,(r,W)=>(e.openBlock(),e.createBlock(_,{key:W,prop:r.prop,label:r.label,width:r.width,align:r.align,type:r.type,"header-align":r.headerAlign},null,8,["prop","label","width","align","type","header-align"]))),128))]),_:1},8,["data"])],36),e.createElementVNode("div",{class:"dropdown-mask",onMousedown:q},null,32)],512),[[e.vShow,e.unref(i)]])],512)}}}),G="",g=((u,p)=>{const y=u.__vccOpts||u;for(const[o,c]of p)y[o]=c;return y})(N,[["__scopeId","data-v-398878f9"]]);g.install=u=>{u.component(g.name,g)};const A=[g],b=function(u){b.installed||A.forEach(p=>{u.component(p.name,p)})};typeof window<"u"&&window.Vue&&b(window.Vue);const P={install:b,SelectTable:g};d.SelectTable=g,d.default=P,d.install=b,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

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

package/style.css

@@ -1 +1 @@
-.custom-dropdown[data-v-2301dea2]{position:relative;width:100%}.dropdown-panel[data-v-2301dea2]{position:fixed;z-index:9999;background:white;border:1px solid #e4e7ed;border-radius:4px;box-shadow:0 2px 12px #0000001a;margin-top:4px;box-sizing:border-box;max-height:200px;overflow:hidden}.dropdown-mask[data-v-2301dea2]{position:fixed;inset:0;z-index:9998;background:transparent}.dropdown-arrow[data-v-2301dea2]{cursor:pointer;transition:transform .3s}.dropdown-arrow--open[data-v-2301dea2]{transform:rotate(180deg)}
+.custom-dropdown[data-v-398878f9]{position:relative;width:100%;display:flex}.dropdown-overlay[data-v-398878f9]{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9998;pointer-events:none}.dropdown-panel[data-v-398878f9]{position:absolute;z-index:9999;background:white;border:1px solid #e4e7ed;border-radius:4px;box-shadow:0 2px 12px #0000001a;margin-top:4px;box-sizing:border-box;max-height:200px;overflow:hidden;pointer-events:auto}.dropdown-mask[data-v-398878f9]{position:absolute;inset:0;z-index:9998;background:transparent;pointer-events:auto}.dropdown-arrow[data-v-398878f9]{cursor:pointer;transition:transform .3s}.dropdown-arrow--open[data-v-398878f9]{transform:rotate(180deg)}