huiyi-select-table 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,10 @@
1
- import { defineComponent as q, openBlock as y, createElementBlock as E, createElementVNode as V, ref as i, watch as Z, onMounted as O, computed as ee, onUnmounted as ne, resolveComponent as S, createVNode as T, unref as g, isRef as te, withCtx as I, normalizeClass as le, createBlock as L, Teleport as F, normalizeStyle as oe, Fragment as ae, renderList as re, createCommentVNode as N } from "vue";
1
+ import { defineComponent as F, openBlock as x, createElementBlock as D, createElementVNode as V, ref as i, watch as J, onMounted as O, nextTick as g, computed as Q, onUnmounted as Z, resolveComponent as R, createVNode as T, unref as b, isRef as ee, withCtx as E, normalizeClass as ne, normalizeStyle as le, Fragment as te, renderList as oe, createBlock as ae, createCommentVNode as re } from "vue";
2
2
  /*! Element Plus Icons Vue v2.3.2 */
3
- var ue = /* @__PURE__ */ q({
3
+ var ue = /* @__PURE__ */ F({
4
4
  name: "ArrowDown",
5
5
  __name: "arrow-down",
6
6
  setup(u) {
7
- return (f, _) => (y(), E("svg", {
7
+ return (f, _) => (x(), D("svg", {
8
8
  xmlns: "http://www.w3.org/2000/svg",
9
9
  viewBox: "0 0 1024 1024"
10
10
  }, [
@@ -15,7 +15,10 @@ var ue = /* @__PURE__ */ q({
15
15
  ]));
16
16
  }
17
17
  }), se = ue;
18
- const ce = /* @__PURE__ */ q({
18
+ const ce = {
19
+ key: 0,
20
+ class: "dropdown-overlay"
21
+ }, ie = /* @__PURE__ */ F({
19
22
  name: "InputSelectCompont",
20
23
  __name: "SelectTable",
21
24
  props: {
@@ -31,120 +34,120 @@ const ce = /* @__PURE__ */ q({
31
34
  },
32
35
  emits: ["getInputRef", "handleChangeSelectValue"],
33
36
  setup(u, { emit: f }) {
34
- const _ = f, t = u;
35
- let d = i(), p = i(""), x = i(), R = i(), r = i(!1), A = i({
37
+ const _ = f, l = u;
38
+ let d = i(), p = i(""), C = i(), I = i(), r = i(!1), A = i({
36
39
  top: "0px",
37
- left: "0px"
38
- // width: "0px",
39
- }), l = i(-1), h = i(!1), D = i(!1);
40
- Z(
41
- () => t.value,
40
+ left: "0px",
41
+ minWidth: "100%"
42
+ }), t = i(-1), h = i(!1), L = i(!1);
43
+ J(
44
+ () => l.value,
42
45
  (e) => {
43
46
  p.value = e || "";
44
47
  },
45
48
  { immediate: !0 }
46
49
  ), O(() => {
47
- nextTick(() => {
48
- _("getInputRef", x.value);
50
+ g(() => {
51
+ _("getInputRef", C.value);
49
52
  });
50
53
  });
51
- const b = () => {
52
- if (!R.value)
54
+ const y = () => {
55
+ if (!I.value)
53
56
  return;
54
- const e = R.value.getBoundingClientRect(), n = window.pageYOffset || document.documentElement.scrollTop, a = window.pageXOffset || document.documentElement.scrollLeft;
57
+ const e = I.value.getBoundingClientRect(), n = window.pageYOffset || document.documentElement.scrollTop, a = window.pageXOffset || document.documentElement.scrollLeft;
55
58
  A.value = {
56
59
  top: `${e.bottom + n}px`,
57
60
  left: `${e.left + a}px`
58
61
  // width: `${rect.width}px`,
59
62
  };
60
- }, C = ee(() => {
61
- const e = t.column?.map((c) => c.prop) || [
63
+ }, S = Q(() => {
64
+ const e = l.column?.map((c) => c.prop) || [
62
65
  "name",
63
66
  "engname",
64
67
  "spell",
65
68
  "zjm",
66
69
  "infoOrder"
67
- ], n = t.options || [], a = p.value || "";
68
- return l.value = -1, nextTick(() => {
69
- const c = t.options || [], w = c.find((m) => m.name === t.value);
70
+ ], n = l.options || [], a = p.value || "";
71
+ return t.value = -1, g(() => {
72
+ const c = l.options || [], w = c.find((m) => m.name === l.value);
70
73
  if (d.value && d.value.setCurrentRow(w), w) {
71
74
  const m = P(
72
75
  e,
73
76
  a,
74
77
  c
75
78
  );
76
- l.value = m.findIndex(
79
+ t.value = m.findIndex(
77
80
  (o) => o.name === w.name
78
81
  );
79
82
  }
80
83
  }), P(e, a, n);
81
- }), K = (e) => {
82
- e?.stopPropagation(), !t.readonly && (r.value ? s() : v());
83
- }, U = () => {
84
- if (t.readonly) {
84
+ }), N = (e) => {
85
+ e?.stopPropagation(), !l.readonly && (r.value ? s() : v());
86
+ }, q = () => {
87
+ if (l.readonly) {
85
88
  s();
86
89
  return;
87
90
  }
88
- r.value || v(), l.value = -1;
91
+ r.value || v(), t.value = -1;
89
92
  }, v = () => {
90
- t.readonly || D.value || (D.value = !0, r.value = !0, nextTick(() => {
91
- b(), h.value = !1, setTimeout(() => {
92
- D.value = !1;
93
+ l.readonly || L.value || (L.value = !0, r.value = !0, g(() => {
94
+ y(), h.value = !1, setTimeout(() => {
95
+ L.value = !1;
93
96
  }, 100);
94
97
  }));
95
98
  }, s = () => {
96
99
  r.value = !1, h.value = !1;
97
100
  }, M = (e) => {
98
- p.value = e.name, s(), nextTick(() => {
99
- x.value?.focus();
101
+ p.value = e.name, s(), g(() => {
102
+ C.value?.focus();
100
103
  }), _("handleChangeSelectValue", {
101
104
  valueCode: e.code,
102
105
  value: e.name,
103
- index: t.itemIndex ? t.itemIndex : ""
106
+ index: l.itemIndex ? l.itemIndex : ""
104
107
  });
105
- }, Y = (e) => {
108
+ }, K = (e) => {
106
109
  h.value = !0, e.preventDefault();
107
- }, $ = (e) => {
110
+ }, U = (e) => {
108
111
  e.stopPropagation(), s();
109
- }, j = async () => {
110
- if (console.log("handleInput"), t.readonly) {
112
+ }, Y = async () => {
113
+ if (console.log("handleInput"), l.readonly) {
111
114
  s();
112
115
  return;
113
116
  }
114
- v(), l.value = -1;
115
- }, H = () => {
116
- if (console.log("handleFocus"), t.readonly) {
117
+ v(), t.value = -1;
118
+ }, $ = () => {
119
+ if (console.log("handleFocus"), l.readonly) {
117
120
  s();
118
121
  return;
119
122
  }
120
- r.value || v(), l.value = -1;
121
- }, X = () => {
123
+ r.value || v(), t.value = -1;
124
+ }, j = () => {
122
125
  console.log("handleBlur", h.value), setTimeout(() => {
123
126
  if (h.value) {
124
- nextTick(() => {
125
- x.value?.focus();
127
+ g(() => {
128
+ C.value?.focus();
126
129
  });
127
130
  return;
128
131
  }
129
132
  s();
130
133
  }, 150);
131
- }, G = (e) => {
132
- C.value.length !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), r.value || v(), z(1)) : e.key === "ArrowUp" ? (e.preventDefault(), r.value || v(), z(-1)) : e.key === "Enter" ? (e.preventDefault(), r.value ? J() : v()) : (e.key === "Escape" || e.key === "Tab") && s());
134
+ }, H = (e) => {
135
+ S.value.length !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), r.value || v(), z(1)) : e.key === "ArrowUp" ? (e.preventDefault(), r.value || v(), z(-1)) : e.key === "Enter" ? (e.preventDefault(), r.value ? W() : v()) : (e.key === "Escape" || e.key === "Tab") && s());
133
136
  }, z = (e) => {
134
- const n = C.value;
137
+ const n = S.value;
135
138
  if (n.length === 0)
136
139
  return;
137
- 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));
138
- const a = n[l.value];
139
- d.value && d.value.setCurrentRow(a), Q();
140
- }, J = () => {
141
- const e = C.value;
142
- if (e.length === 0 || l.value === -1)
140
+ 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));
141
+ const a = n[t.value];
142
+ d.value && d.value.setCurrentRow(a), X();
143
+ }, W = () => {
144
+ const e = S.value;
145
+ if (e.length === 0 || t.value === -1)
143
146
  return;
144
- const n = e[l.value];
147
+ const n = e[t.value];
145
148
  M(n);
146
- }, Q = () => {
147
- nextTick(() => {
149
+ }, X = () => {
150
+ g(() => {
148
151
  const e = d.value;
149
152
  if (!e)
150
153
  return;
@@ -167,53 +170,50 @@ const ce = /* @__PURE__ */ q({
167
170
  ) : a;
168
171
  };
169
172
  return O(() => {
170
- window.addEventListener("resize", b), window.addEventListener("scroll", b, !0);
171
- }), ne(() => {
172
- window.removeEventListener("resize", b), window.removeEventListener("scroll", b, !0);
173
+ window.addEventListener("resize", y), window.addEventListener("scroll", y, !0);
174
+ }), Z(() => {
175
+ window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0);
173
176
  }), (e, n) => {
174
- const a = S("el-icon"), c = S("el-input"), w = S("el-table-column"), m = S("el-table");
175
- return y(), E("div", {
177
+ const a = R("el-icon"), c = R("el-input"), w = R("el-table-column"), m = R("el-table");
178
+ return x(), D("div", {
176
179
  class: "custom-dropdown",
177
180
  ref_key: "dropdownRef",
178
- ref: R
181
+ ref: I
179
182
  }, [
180
183
  T(c, {
181
- modelValue: g(p),
182
- "onUpdate:modelValue": n[0] || (n[0] = (o) => te(p) ? p.value = o : p = o),
184
+ modelValue: b(p),
185
+ "onUpdate:modelValue": n[0] || (n[0] = (o) => ee(p) ? p.value = o : p = o),
183
186
  ref_key: "inputValueRef",
184
- ref: x,
185
- readonly: t.readonly,
186
- onInput: j,
187
- onKeydown: G,
188
- onFocus: H,
189
- onBlur: X,
190
- onClick: U
187
+ ref: C,
188
+ readonly: l.readonly,
189
+ onInput: Y,
190
+ onKeydown: H,
191
+ onFocus: $,
192
+ onBlur: j,
193
+ onClick: q
191
194
  }, {
192
- suffix: I(() => [
195
+ suffix: E(() => [
193
196
  T(a, {
194
- class: le(["el-input__icon dropdown-arrow", { "dropdown-arrow--open": g(r) }]),
195
- onClick: K
197
+ class: ne(["el-input__icon dropdown-arrow", { "dropdown-arrow--open": b(r) }]),
198
+ onClick: N
196
199
  }, {
197
- default: I(() => [
198
- T(g(se))
200
+ default: E(() => [
201
+ T(b(se))
199
202
  ]),
200
203
  _: 1
201
204
  }, 8, ["class"])
202
205
  ]),
203
206
  _: 1
204
207
  }, 8, ["modelValue", "readonly"]),
205
- g(r) ? (y(), L(F, {
206
- key: 0,
207
- to: "body"
208
- }, [
208
+ b(r) ? (x(), D("div", ce, [
209
209
  V("div", {
210
210
  class: "dropdown-panel",
211
- style: oe(g(A)),
212
- onMousedown: Y
211
+ style: le(b(A)),
212
+ onMousedown: K
213
213
  }, [
214
214
  T(m, {
215
215
  border: "",
216
- data: C.value,
216
+ data: S.value,
217
217
  "highlight-current-row": "",
218
218
  ref_key: "tableRef",
219
219
  ref: d,
@@ -221,9 +221,9 @@ const ce = /* @__PURE__ */ q({
221
221
  onRowClick: M,
222
222
  style: { width: "100%" }
223
223
  }, {
224
- default: I(() => [
225
- (y(!0), E(ae, null, re(t.column, (o, W) => (y(), L(w, {
226
- key: W,
224
+ default: E(() => [
225
+ (x(!0), D(te, null, oe(l.column, (o, G) => (x(), ae(w, {
226
+ key: G,
227
227
  prop: o.prop,
228
228
  label: o.label,
229
229
  width: o.width,
@@ -234,39 +234,34 @@ const ce = /* @__PURE__ */ q({
234
234
  ]),
235
235
  _: 1
236
236
  }, 8, ["data"])
237
- ], 36)
238
- ])) : N("", !0),
239
- g(r) ? (y(), L(F, {
240
- key: 1,
241
- to: "body"
242
- }, [
237
+ ], 36),
243
238
  V("div", {
244
239
  class: "dropdown-mask",
245
- onMousedown: $
240
+ onMousedown: U
246
241
  }, null, 32)
247
- ])) : N("", !0)
242
+ ])) : re("", !0)
248
243
  ], 512);
249
244
  };
250
245
  }
251
246
  });
252
- const ie = (u, f) => {
247
+ const de = (u, f) => {
253
248
  const _ = u.__vccOpts || u;
254
- for (const [t, d] of f)
255
- _[t] = d;
249
+ for (const [l, d] of f)
250
+ _[l] = d;
256
251
  return _;
257
- }, k = /* @__PURE__ */ ie(ce, [["__scopeId", "data-v-5f1ab198"]]);
252
+ }, k = /* @__PURE__ */ de(ie, [["__scopeId", "data-v-40f4afb7"]]);
258
253
  k.install = (u) => {
259
254
  u.component(k.name, k);
260
255
  };
261
- const de = [
256
+ const fe = [
262
257
  k
263
258
  ], B = function(u) {
264
- B.installed || de.forEach((f) => {
259
+ B.installed || fe.forEach((f) => {
265
260
  u.component(f.name, f);
266
261
  });
267
262
  };
268
263
  typeof window < "u" && window.Vue && B(window.Vue);
269
- const pe = {
264
+ const ve = {
270
265
  // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
271
266
  install: B,
272
267
  // 以下是具体的组件列表
@@ -274,6 +269,6 @@ const pe = {
274
269
  };
275
270
  export {
276
271
  k as SelectTable,
277
- pe as default,
272
+ ve as default,
278
273
  B as install
279
274
  };
@@ -1 +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(""),v=e.ref(),T=e.ref(),s=e.ref(!1),B=e.ref({top:"0px",left:"0px"}),l=e.ref(-1),k=e.ref(!1),S=e.ref(!1);e.watch(()=>o.value,n=>{m.value=n||""},{immediate:!0}),e.onMounted(()=>{nextTick(()=>{g("getInputRef",v.value)})});const b=()=>{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=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,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||S.value||(S.value=!0,s.value=!0,nextTick(()=>{b(),k.value=!1,setTimeout(()=>{S.value=!1},100)}))},d=()=>{s.value=!1,k.value=!1},R=n=>{m.value=n.name,d(),nextTick(()=>{v.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){nextTick(()=>{v.value?.focus()});return}d()},150)},K=n=>{C.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=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 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:T},[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:v,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:C.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-5f1ab198"]]);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"}})});
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 W="";/*! 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={key:0,class:"dropdown-overlay"},M=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,l=i;let f=e.ref(),m=e.ref(""),v=e.ref(),S=e.ref(),s=e.ref(!1),R=e.ref({top:"0px",left:"0px",minWidth:"100%"}),o=e.ref(-1),k=e.ref(!1),T=e.ref(!1);e.watch(()=>l.value,n=>{m.value=n||""},{immediate:!0}),e.onMounted(()=>{e.nextTick(()=>{g("getInputRef",v.value)})});const b=()=>{if(!S.value)return;const n=S.value.getBoundingClientRect(),t=window.pageYOffset||document.documentElement.scrollTop,r=window.pageXOffset||document.documentElement.scrollLeft;R.value={top:`${n.bottom+t}px`,left:`${n.left+r}px`}},C=e.computed(()=>{const n=l.column?.map(u=>u.prop)||["name","engname","spell","zjm","infoOrder"],t=l.options||[],r=m.value||"";return o.value=-1,e.nextTick(()=>{const u=l.options||[],_=u.find(h=>h.name===l.value);if(f.value&&f.value.setCurrentRow(_),_){const h=E(n,r,u);o.value=h.findIndex(a=>a.name===_.name)}}),E(n,r,t)}),P=n=>{n?.stopPropagation(),!l.readonly&&(s.value?d():w())},z=()=>{if(l.readonly){d();return}s.value||w(),o.value=-1},w=()=>{l.readonly||T.value||(T.value=!0,s.value=!0,e.nextTick(()=>{b(),k.value=!1,setTimeout(()=>{T.value=!1},100)}))},d=()=>{s.value=!1,k.value=!1},V=n=>{m.value=n.name,d(),e.nextTick(()=>{v.value?.focus()}),g("handleChangeSelectValue",{valueCode:n.code,value:n.name,index:l.itemIndex?l.itemIndex:""})},O=n=>{k.value=!0,n.preventDefault()},q=n=>{n.stopPropagation(),d()},F=async()=>{if(console.log("handleInput"),l.readonly){d();return}w(),o.value=-1},j=()=>{if(console.log("handleFocus"),l.readonly){d();return}s.value||w(),o.value=-1},K=()=>{console.log("handleBlur",k.value),setTimeout(()=>{if(k.value){e.nextTick(()=>{v.value?.focus()});return}d()},150)},U=n=>{C.value.length!==0&&(n.key==="ArrowDown"?(n.preventDefault(),s.value||w(),B(1)):n.key==="ArrowUp"?(n.preventDefault(),s.value||w(),B(-1)):n.key==="Enter"?(n.preventDefault(),s.value?H():w()):(n.key==="Escape"||n.key==="Tab")&&d())},B=n=>{const t=C.value;if(t.length===0)return;o.value===-1?n===1?o.value=0:o.value=t.length-1:(o.value+=n,o.value<0?o.value=t.length-1:o.value>=t.length&&(o.value=0));const r=t[o.value];f.value&&f.value.setCurrentRow(r),Y()},H=()=>{const n=C.value;if(n.length===0||o.value===-1)return;const t=n[o.value];V(t)},Y=()=>{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(h=>{const a=_[h];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"),h=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:v,readonly:l.readonly,onInput:F,onKeydown:U,onFocus:j,onBlur:K,onClick:z},{suffix:e.withCtx(()=>[e.createVNode(r,{class:e.normalizeClass(["el-input__icon dropdown-arrow",{"dropdown-arrow--open":e.unref(s)}]),onClick:P},{default:e.withCtx(()=>[e.createVNode(e.unref(I))]),_:1},8,["class"])]),_:1},8,["modelValue","readonly"]),e.unref(s)?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",{class:"dropdown-panel",style:e.normalizeStyle(e.unref(R)),onMousedown:O},[e.createVNode(h,{border:"",data:C.value,"highlight-current-row":"",ref_key:"tableRef",ref:f,"max-height":"200px",onRowClick:V,style:{width:"100%"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.column,(a,$)=>(e.openBlock(),e.createBlock(_,{key:$,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.createElementVNode("div",{class:"dropdown-mask",onMousedown:q},null,32)])):e.createCommentVNode("",!0)],512)}}}),X="",y=((i,p)=>{const g=i.__vccOpts||i;for(const[l,f]of p)g[l]=f;return g})(M,[["__scopeId","data-v-40f4afb7"]]);y.install=i=>{i.component(y.name,y)};const N=[y],x=function(i){x.installed||N.forEach(p=>{i.component(p.name,p)})};typeof window<"u"&&window.Vue&&x(window.Vue);const A={install:x,SelectTable:y};c.SelectTable=y,c.default=A,c.install=x,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "huiyi-select-table",
3
- "version": "0.1.21",
3
+ "version": "0.1.23",
4
4
  "description": "A Vue.js select table component",
5
5
  "main": "huiyi-select-table.umd.js",
6
6
  "module": "huiyi-select-table.mjs",
package/style.css CHANGED
@@ -1 +1 @@
1
- .custom-dropdown[data-v-5f1ab198]{position:relative;width:100%}.dropdown-panel[data-v-5f1ab198]{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-5f1ab198]{position:fixed;inset:0;z-index:9998;background:transparent}.dropdown-arrow[data-v-5f1ab198]{cursor:pointer;transition:transform .3s}.dropdown-arrow--open[data-v-5f1ab198]{transform:rotate(180deg)}
1
+ .custom-dropdown[data-v-40f4afb7]{position:relative;width:100%}.dropdown-overlay[data-v-40f4afb7]{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9998;pointer-events:none}.dropdown-panel[data-v-40f4afb7]{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-40f4afb7]{position:absolute;inset:0;z-index:9998;background:transparent;pointer-events:auto}.dropdown-arrow[data-v-40f4afb7]{cursor:pointer;transition:transform .3s}.dropdown-arrow--open[data-v-40f4afb7]{transform:rotate(180deg)}
Binary file