huiyi-select-table 0.1.17 → 0.1.19

package/huiyi-select-table.mjs

@@ -1,158 +1,279 @@
-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 F, openBlock as g, createElementBlock as L, createElementVNode as E, resolveComponent as C, createVNode as S, unref as m, isRef as Q, withCtx as D, normalizeClass as W, createBlock as I, Teleport as P, normalizeStyle as Z, Fragment as ee, renderList as ne, createCommentVNode as O } from "vue";
+/*! Element Plus Icons Vue v2.3.2 */
+var te = /* @__PURE__ */ F({
+  name: "ArrowDown",
+  __name: "arrow-down",
+  setup(u) {
+    return (d, _) => (g(), L("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1024 1024"
+    }, [
+      E("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"
+      })
+    ]));
+  }
+}), le = te;
+const oe = /* @__PURE__ */ F({
   name: "InputSelectCompont",
   __name: "SelectTable",
   props: {
-    originalData: Object,
-    showValue: String,
-    columnList: Object,
-    searchQueryInit: String,
-    labelIndex: String,
-    isRead: !1,
-    isRequired: !1,
-    isIndex: 1
+    options: Array,
+    readonly: Boolean,
+    required: Boolean,
+    value: String,
+    itemIndex: {
+      type: [String, Number, null],
+      default: null
+    },
+    column: Array
   },
-  emits: ["slectValue"],
-  setup(t, { emit: c }) {
-    const u = t, 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(() => {
-      if (!r.value || !w.value)
-        return { display: "none" };
-      const e = w.value.getBoundingClientRect();
-      return {
-        position: "fixed",
-        top: e.bottom + "px",
-        left: e.left + "px",
-        width: e.width + 80 + "px",
-        zIndex: 1e4,
-        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;
-    }, x = (e) => {
-      b.value = e, e && (s.value = e[u.showValue], r.value = !1);
-      let l = {
-        val: e,
-        isIndex: u.isIndex
+  emits: ["getInputRef", "handleChangeSelectValue"],
+  setup(u, { emit: d }) {
+    const _ = d, t = u;
+    let i = ref(), f = ref(""), k = ref(), T = ref(), r = ref(!1), B = ref({
+      top: "0px",
+      left: "0px"
+      // width: "0px",
+    }), l = ref(-1), y = ref(!1), R = ref(!1);
+    watch(
+      () => t.value,
+      (e) => {
+        f.value = e || "";
+      },
+      { immediate: !0 }
+    ), onMounted(() => {
+      nextTick(() => {
+        _("getInputRef", k.value);
+      });
+    });
+    const h = () => {
+      if (!T.value)
+        return;
+      const e = T.value.getBoundingClientRect(), n = window.pageYOffset || document.documentElement.scrollTop, a = window.pageXOffset || document.documentElement.scrollLeft;
+      B.value = {
+        top: `${e.bottom + n}px`,
+        left: `${e.left + a}px`
+        // width: `${rect.width}px`,
       };
-      D("slectValue", l);
-    }, T = () => {
-      g.value == !1 && (r.value = !1);
-    }, O = () => {
-      g.value = !0;
+    }, x = computed(() => {
+      const e = t.column?.map((c) => c.prop) || [
+        "name",
+        "engname",
+        "spell",
+        "zjm",
+        "infoOrder"
+      ], n = t.options || [], a = f.value || "";
+      return l.value = -1, nextTick(() => {
+        const c = t.options || [], v = c.find((w) => w.name === t.value);
+        if (i.value && i.value.setCurrentRow(v), v) {
+          const w = z(
+            e,
+            a,
+            c
+          );
+          l.value = w.findIndex(
+            (o) => o.name === v.name
+          );
+        }
+      }), z(e, a, n);
+    }), N = (e) => {
+      e?.stopPropagation(), !t.readonly && (r.value ? s() : p());
     }, q = () => {
-      g.value = !1;
-    }, B = (e) => {
-      if (console.log(e.key, "event.key "), n.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);
-        } else if (e.key == "ArrowUp") {
-          e.preventDefault();
-          let l = o.value - 1;
-          l < 0 && (l = n.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]);
+      if (t.readonly) {
+        s();
+        return;
       }
-    }, 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]);
+      r.value || p(), l.value = -1;
+    }, p = () => {
+      t.readonly || R.value || (R.value = !0, r.value = !0, nextTick(() => {
+        h(), y.value = !1, setTimeout(() => {
+          R.value = !1;
+        }, 100);
+      }));
+    }, s = () => {
+      r.value = !1, y.value = !1;
+    }, M = (e) => {
+      f.value = e.name, s(), nextTick(() => {
+        k.value?.focus();
+      }), _("handleChangeSelectValue", {
+        valueCode: e.code,
+        value: e.name,
+        index: t.itemIndex ? t.itemIndex : ""
+      });
+    }, K = (e) => {
+      y.value = !0, e.preventDefault();
+    }, U = (e) => {
+      e.stopPropagation(), s();
+    }, Y = async () => {
+      if (console.log("handleInput"), t.readonly) {
+        s();
+        return;
+      }
+      p(), l.value = -1;
+    }, $ = () => {
+      if (console.log("handleFocus"), t.readonly) {
+        s();
+        return;
+      }
+      r.value || p(), l.value = -1;
+    }, j = () => {
+      console.log("handleBlur", y.value), setTimeout(() => {
+        if (y.value) {
+          nextTick(() => {
+            k.value?.focus();
+          });
+          return;
         }
+        s();
+      }, 150);
+    }, H = (e) => {
+      x.value.length !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), r.value || p(), A(1)) : e.key === "ArrowUp" ? (e.preventDefault(), r.value || p(), A(-1)) : e.key === "Enter" ? (e.preventDefault(), r.value ? X() : p()) : (e.key === "Escape" || e.key === "Tab") && s());
+    }, A = (e) => {
+      const n = x.value;
+      if (n.length === 0)
+        return;
+      l.value === -1 ? e === 1 ? l.value = 0 : l.value = n.length - 1 : (l.value += e, l.value < 0 ? l.value = n.length - 1 : l.value >= n.length && (l.value = 0));
+      const a = n[l.value];
+      i.value && i.value.setCurrentRow(a), G();
+    }, X = () => {
+      const e = x.value;
+      if (e.length === 0 || l.value === -1)
+        return;
+      const n = e[l.value];
+      M(n);
+    }, G = () => {
+      nextTick(() => {
+        const e = i.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({
+          behavior: "smooth",
+          block: "nearest"
+        });
       });
+    }, z = (e, n, a) => {
+      const c = n.trim().toLowerCase();
+      return c ? a.filter(
+        (v) => e.some((w) => {
+          const o = v[w];
+          return o == null && o !== 0 ? !1 : String(o).toLowerCase().includes(c);
+        })
+      ) : a;
     };
-    return (e, l) => {
-      const d = _("el-input"), F = _("el-table-column"), L = _("el-table");
-      return p(), k("span", {
-        class: "huiyi-select-spanInput",
-        onMouseover: O,
-        onMouseout: q,
-        ref_key: "inputContainerRef",
-        ref: w
+    return onMounted(() => {
+      window.addEventListener("resize", h), window.addEventListener("scroll", h, !0);
+    }), onUnmounted(() => {
+      window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
+    }), (e, n) => {
+      const a = C("el-icon"), c = C("el-input"), v = C("el-table-column"), w = C("el-table");
+      return g(), L("div", {
+        class: "custom-dropdown",
+        ref_key: "dropdownRef",
+        ref: T
       }, [
-        C(d, {
-          placeholder: "请输入搜索内容",
-          modelValue: s.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (i) => s.value = i),
-          id: "filterInput",
-          onInput: y,
-          style: { width: "200px" },
-          readonly: t.isRead,
-          required: t.isRequired,
-          onFocus: y,
-          onBlur: T,
-          onKeydown: B
-        }, null, 8, ["modelValue", "readonly", "required"]),
-        (p(), R(H, {
-          to: "body",
-          class: "huiyi-select-spanDiv"
+        S(c, {
+          modelValue: m(f),
+          "onUpdate:modelValue": n[0] || (n[0] = (o) => Q(f) ? f.value = o : f = o),
+          ref_key: "inputValueRef",
+          ref: k,
+          readonly: t.readonly,
+          onInput: Y,
+          onKeydown: H,
+          onFocus: $,
+          onBlur: j,
+          onClick: q
+        }, {
+          suffix: D(() => [
+            S(a, {
+              class: W(["el-input__icon dropdown-arrow", { "dropdown-arrow--open": m(r) }]),
+              onClick: N
+            }, {
+              default: D(() => [
+                S(m(le))
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "readonly"]),
+        m(r) ? (g(), I(P, {
+          key: 0,
+          to: "body"
+        }, [
+          E("div", {
+            class: "dropdown-panel",
+            style: Z(m(B)),
+            onMousedown: K
+          }, [
+            S(w, {
+              border: "",
+              data: m(x),
+              "highlight-current-row": "",
+              ref_key: "tableRef",
+              ref: i,
+              "max-height": "200px",
+              onRowClick: M,
+              style: { width: "100%" }
+            }, {
+              default: D(() => [
+                (g(!0), L(ee, null, ne(t.column, (o, J) => (g(), I(v, {
+                  key: J,
+                  prop: o.prop,
+                  label: o.label,
+                  width: o.width,
+                  align: o.align,
+                  type: o.type,
+                  "header-align": o.headerAlign
+                }, null, 8, ["prop", "label", "width", "align", "type", "header-align"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["data"])
+          ], 36)
+        ])) : O("", !0),
+        m(r) ? (g(), I(P, {
+          key: 1,
+          to: "body"
         }, [
-          C(L, {
-            ref_key: "singleTableRef",
-            ref: f,
-            border: "",
-            class: "huiyi-select-spanInputTable",
-            "row-class-name": t.originalData,
-            "highlight-current-row": "",
-            data: n.value,
-            onCurrentChange: V,
-            onRowClick: x,
-            style: Q(S.value)
-          }, {
-            default: z(() => [
-              (p(!0), k(K, null, U(t.columnList, (i, A) => (p(), R(F, {
-                key: A,
-                prop: i.prop,
-                align: i.align,
-                label: i.label,
-                width: i.width,
-                "header-align": i.headerAlign,
-                "show-overflow-tooltip": ""
-              }, null, 8, ["prop", "align", "label", "width", "header-align"]))), 128))
-            ]),
-            _: 1
-          }, 8, ["row-class-name", "data", "style"])
-        ]))
-      ], 544);
+          E("div", {
+            class: "dropdown-mask",
+            onMousedown: U
+          }, null, 32)
+        ])) : O("", !0)
+      ], 512);
     };
   }
 });
-const G = (t, c) => {
-  const u = t.__vccOpts || t;
-  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);
+const ae = (u, d) => {
+  const _ = u.__vccOpts || u;
+  for (const [t, i] of d)
+    _[t] = i;
+  return _;
+}, b = /* @__PURE__ */ ae(oe, [["__scopeId", "data-v-fcb596cf"]]);
+b.install = (u) => {
+  u.component(b.name, b);
 };
-const J = [
-  v
-], m = function(t) {
-  m.installed || J.forEach((c) => {
-    t.component(c.name, c);
+const re = [
+  b
+], V = function(u) {
+  V.installed || re.forEach((d) => {
+    u.component(d.name, d);
   });
 };
-typeof window < "u" && window.Vue && m(window.Vue);
-const W = {
+typeof window < "u" && window.Vue && V(window.Vue);
+const se = {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-  install: m,
+  install: V,
   // 以下是具体的组件列表
-  SelectTable: v
+  SelectTable: b
 };
 export {
-  v as SelectTable,
-  W as default,
-  m as install
+  b as SelectTable,
+  se as default,
+  V 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 $="";/*! 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=ref(),m=ref(""),x=ref(),T=ref(),c=ref(!1),B=ref({top:"0px",left:"0px"}),l=ref(-1),v=ref(!1),S=ref(!1);watch(()=>o.value,n=>{m.value=n||""},{immediate:!0}),onMounted(()=>{nextTick(()=>{g("getInputRef",x.value)})});const k=()=>{if(!T.value)return;const n=T.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`}},C=computed(()=>{const n=o.column?.map(d=>d.prop)||["name","engname","spell","zjm","infoOrder"],t=o.options||[],r=m.value||"";return l.value=-1,nextTick(()=>{const d=o.options||[],_=d.find(y=>y.name===o.value);if(f.value&&f.value.setCurrentRow(_),_){const y=E(n,r,d);l.value=y.findIndex(a=>a.name===_.name)}}),E(n,r,t)}),A=n=>{n?.stopPropagation(),!o.readonly&&(c.value?u():w())},P=()=>{if(o.readonly){u();return}c.value||w(),l.value=-1},w=()=>{o.readonly||S.value||(S.value=!0,c.value=!0,nextTick(()=>{k(),v.value=!1,setTimeout(()=>{S.value=!1},100)}))},u=()=>{c.value=!1,v.value=!1},R=n=>{m.value=n.name,u(),nextTick(()=>{x.value?.focus()}),g("handleChangeSelectValue",{valueCode:n.code,value:n.name,index:o.itemIndex?o.itemIndex:""})},z=n=>{v.value=!0,n.preventDefault()},O=n=>{n.stopPropagation(),u()},q=async()=>{if(console.log("handleInput"),o.readonly){u();return}w(),l.value=-1},F=()=>{if(console.log("handleFocus"),o.readonly){u();return}c.value||w(),l.value=-1},j=()=>{console.log("handleBlur",v.value),setTimeout(()=>{if(v.value){nextTick(()=>{x.value?.focus()});return}u()},150)},K=n=>{C.value.length!==0&&(n.key==="ArrowDown"?(n.preventDefault(),c.value||w(),V(1)):n.key==="ArrowUp"?(n.preventDefault(),c.value||w(),V(-1)):n.key==="Enter"?(n.preventDefault(),c.value?U():w()):(n.key==="Escape"||n.key==="Tab")&&u())},V=n=>{const t=C.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=C.value;if(n.length===0||l.value===-1)return;const t=n[l.value];R(t)},H=()=>{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 d=t.trim().toLowerCase();return d?r.filter(_=>n.some(y=>{const a=_[y];return a==null&&a!==0?!1:String(a).toLowerCase().includes(d)})):r};return onMounted(()=>{window.addEventListener("resize",k),window.addEventListener("scroll",k,!0)}),onUnmounted(()=>{window.removeEventListener("resize",k),window.removeEventListener("scroll",k,!0)}),(n,t)=>{const r=e.resolveComponent("el-icon"),d=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:T},[e.createVNode(d,{modelValue:e.unref(m),"onUpdate:modelValue":t[0]||(t[0]=a=>e.isRef(m)?m.value=a:m=a),ref_key:"inputValueRef",ref:x,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(c)}]),onClick:A},{default:e.withCtx(()=>[e.createVNode(e.unref(I))]),_:1},8,["class"])]),_:1},8,["modelValue","readonly"]),e.unref(c)?(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:e.unref(C),"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(c)?(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-fcb596cf"]]);h.install=i=>{i.component(h.name,h)};const M=[h],b=function(i){b.installed||M.forEach(p=>{i.component(p.name,p)})};typeof window<"u"&&window.Vue&&b(window.Vue);const N={install:b,SelectTable:h};s.SelectTable=h,s.default=N,s.install=b,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.19",
   "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}
+.custom-dropdown[data-v-fcb596cf]{position:relative;width:100%}.dropdown-panel[data-v-fcb596cf]{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-fcb596cf]{position:fixed;inset:0;z-index:9998;background:transparent}.dropdown-arrow[data-v-fcb596cf]{cursor:pointer;transition:transform .3s}.dropdown-arrow--open[data-v-fcb596cf]{transform:rotate(180deg)}