huiyi-select-table 0.0.0 → 0.0.2
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 +1 @@
|
|
|
1
|
-
.el-table .warning-row[data-v-
|
|
1
|
+
.el-table .warning-row[data-v-2d4704ea]{--el-table-tr-bg-color: #141}.spanInput[data-v-2d4704ea]{display:inline-block;position:relative}.spanDiv[data-v-2d4704ea]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { defineComponent as j, resolveComponent as w, createElementBlock as C, openBlock as g, createVNode as I, withDirectives as A, unref as m, isRef as H, createElementVNode as N, withCtx as F, Fragment as K, renderList as U, createBlock as q, vShow as Q } from "vue";
|
|
2
|
+
const $ = { class: "spanDiv" }, z = /* @__PURE__ */ j({
|
|
3
|
+
name: "InputSelectCompont",
|
|
4
|
+
__name: "SelectTable",
|
|
5
|
+
props: {
|
|
6
|
+
originalData: Object,
|
|
7
|
+
showValue: String,
|
|
8
|
+
columnList: Object
|
|
9
|
+
},
|
|
10
|
+
emits: ["slectValue"],
|
|
11
|
+
setup(n, { emit: u }) {
|
|
12
|
+
const r = n, a = ref(""), s = ref(!1), t = ref([]), _ = ref([]), p = ref(!1), o = ref(-1), f = ref(-1), h = ref(null), d = () => {
|
|
13
|
+
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), o.value = -1, f.value = -1) : t.value = r.originalData;
|
|
14
|
+
}, x = u, D = (e) => {
|
|
15
|
+
_.value = e;
|
|
16
|
+
}, k = (e) => {
|
|
17
|
+
_.value = e, e && (a.value = e[r.showValue], s.value = !1), x("slectValue", e);
|
|
18
|
+
}, R = () => {
|
|
19
|
+
p.value == !1 && (s.value = !1);
|
|
20
|
+
}, S = () => {
|
|
21
|
+
p.value = !0;
|
|
22
|
+
}, O = () => {
|
|
23
|
+
p.value = !1;
|
|
24
|
+
}, E = (e) => {
|
|
25
|
+
if (console.log(e.key, "event.key "), t.value.length !== 0)
|
|
26
|
+
if (e.key == "ArrowDown") {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
let l = o.value + 1;
|
|
29
|
+
l >= t.value.length && (l = 0), console.log(l, "newIndex"), y(l);
|
|
30
|
+
} else if (e.key == "ArrowUp") {
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
let l = o.value - 1;
|
|
33
|
+
l < 0 && (l = t.value.length - 1), y(l);
|
|
34
|
+
} else e.key === "Enter" && (e.preventDefault(), s.value == !0 ? T() : d());
|
|
35
|
+
}, T = () => {
|
|
36
|
+
if (o.value >= 0) {
|
|
37
|
+
f.value === o.value ? f.value = -1 : f.value = o.value;
|
|
38
|
+
const e = t.value;
|
|
39
|
+
console.log(e[o.value], o.value, "hh[currentHighlightIndex]"), k(t.value[o.value]);
|
|
40
|
+
}
|
|
41
|
+
}, y = (e) => {
|
|
42
|
+
o.value = e, nextTick(() => {
|
|
43
|
+
if (h.value && t.value.length > 0 && e >= 0 && e < t.value.length) {
|
|
44
|
+
const c = h.value.$el.querySelectorAll(".el-table__row");
|
|
45
|
+
console.log(c, "rows"), c.length > 0 && e < c.length && c[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), h.value.setCurrentRow(t.value[o.value]);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
return (e, l) => {
|
|
50
|
+
const c = w("el-input"), L = w("el-table-column"), B = w("el-table");
|
|
51
|
+
return g(), C("span", {
|
|
52
|
+
class: "spanInput",
|
|
53
|
+
onMouseover: S,
|
|
54
|
+
onMouseout: O
|
|
55
|
+
}, [
|
|
56
|
+
I(c, {
|
|
57
|
+
placeholder: "请输入搜索内容",
|
|
58
|
+
modelValue: m(a),
|
|
59
|
+
"onUpdate:modelValue": l[0] || (l[0] = (i) => H(a) ? a.value = i : null),
|
|
60
|
+
id: "filterInput",
|
|
61
|
+
onInput: d,
|
|
62
|
+
style: { width: "200px" },
|
|
63
|
+
onFocus: d,
|
|
64
|
+
onBlur: R,
|
|
65
|
+
onKeydown: E
|
|
66
|
+
}, null, 8, ["modelValue"]),
|
|
67
|
+
A(N("div", $, [
|
|
68
|
+
I(B, {
|
|
69
|
+
ref_key: "singleTableRef",
|
|
70
|
+
ref: h,
|
|
71
|
+
border: "",
|
|
72
|
+
class: "spanInputTable",
|
|
73
|
+
"row-class-name": e.tableRowClassName,
|
|
74
|
+
"highlight-current-row": "",
|
|
75
|
+
data: m(t),
|
|
76
|
+
style: { width: "300px", height: "230px", position: "fixed" },
|
|
77
|
+
onCurrentChange: D,
|
|
78
|
+
onRowClick: k
|
|
79
|
+
}, {
|
|
80
|
+
default: F(() => [
|
|
81
|
+
(g(!0), C(K, null, U(n.columnList, (i, M) => (g(), q(L, {
|
|
82
|
+
key: M,
|
|
83
|
+
prop: i.prop,
|
|
84
|
+
label: i.label,
|
|
85
|
+
width: i.width,
|
|
86
|
+
"show-overflow-tooltip": "",
|
|
87
|
+
align: "center"
|
|
88
|
+
}, null, 8, ["prop", "label", "width"]))), 128))
|
|
89
|
+
]),
|
|
90
|
+
_: 1
|
|
91
|
+
}, 8, ["row-class-name", "data"])
|
|
92
|
+
], 512), [
|
|
93
|
+
[Q, m(s)]
|
|
94
|
+
])
|
|
95
|
+
], 32);
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
}), G = (n, u) => {
|
|
99
|
+
const r = n.__vccOpts || n;
|
|
100
|
+
for (const [a, s] of u)
|
|
101
|
+
r[a] = s;
|
|
102
|
+
return r;
|
|
103
|
+
}, v = /* @__PURE__ */ G(z, [["__scopeId", "data-v-2d4704ea"]]);
|
|
104
|
+
v.install = (n) => {
|
|
105
|
+
n.component(v.name, v);
|
|
106
|
+
};
|
|
107
|
+
const V = [
|
|
108
|
+
v
|
|
109
|
+
], b = function(n) {
|
|
110
|
+
b.installed || V.forEach((u) => {
|
|
111
|
+
n.component(u.name, u);
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
typeof window < "u" && window.Vue && b(window.Vue);
|
|
115
|
+
const P = {
|
|
116
|
+
install: b,
|
|
117
|
+
...V
|
|
118
|
+
};
|
|
119
|
+
export {
|
|
120
|
+
v as SelectTable,
|
|
121
|
+
P as default,
|
|
122
|
+
b as install
|
|
123
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.HuiyiSelectTable={},a.Vue))})(this,(function(a,l){"use strict";const C={class:"spanDiv"},d=((s,c)=>{const i=s.__vccOpts||s;for(const[r,u]of c)i[r]=u;return i})(l.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(s,{emit:c}){const i=s,r=ref(""),u=ref(!1),n=ref([]),b=ref([]),g=ref(!1),o=ref(-1),w=ref(-1),m=ref(null),v=()=>{u.value=!0,r.value?(n.value=i.originalData.filter(e=>Object.keys(e).some(t=>String(e[t]).toLowerCase().includes(r.value.toLowerCase()))),console.log(n.value),o.value=-1,w.value=-1):n.value=i.originalData},V=c,S=e=>{b.value=e},y=e=>{b.value=e,e&&(r.value=e[i.showValue],u.value=!1),V("slectValue",e)},x=()=>{g.value==!1&&(u.value=!1)},D=()=>{g.value=!0},T=()=>{g.value=!1},R=e=>{if(console.log(e.key,"event.key "),n.value.length!==0)if(e.key=="ArrowDown"){e.preventDefault();let t=o.value+1;t>=n.value.length&&(t=0),console.log(t,"newIndex"),k(t)}else if(e.key=="ArrowUp"){e.preventDefault();let t=o.value-1;t<0&&(t=n.value.length-1),k(t)}else e.key==="Enter"&&(e.preventDefault(),u.value==!0?O():v())},O=()=>{if(o.value>=0){w.value===o.value?w.value=-1:w.value=o.value;const e=n.value;console.log(e[o.value],o.value,"hh[currentHighlightIndex]"),y(n.value[o.value])}},k=e=>{o.value=e,nextTick(()=>{if(m.value&&n.value.length>0&&e>=0&&e<n.value.length){const f=m.value.$el.querySelectorAll(".el-table__row");console.log(f,"rows"),f.length>0&&e<f.length&&f[e].scrollIntoView({behavior:"smooth",block:"nearest"}),m.value.setCurrentRow(n.value[o.value])}})};return(e,t)=>{const f=l.resolveComponent("el-input"),B=l.resolveComponent("el-table-column"),E=l.resolveComponent("el-table");return l.openBlock(),l.createElementBlock("span",{class:"spanInput",onMouseover:D,onMouseout:T},[l.createVNode(f,{placeholder:"请输入搜索内容",modelValue:l.unref(r),"onUpdate:modelValue":t[0]||(t[0]=p=>l.isRef(r)?r.value=p:null),id:"filterInput",onInput:v,style:{width:"200px"},onFocus:v,onBlur:x,onKeydown:R},null,8,["modelValue"]),l.withDirectives(l.createElementVNode("div",C,[l.createVNode(E,{ref_key:"singleTableRef",ref:m,border:"",class:"spanInputTable","row-class-name":e.tableRowClassName,"highlight-current-row":"",data:l.unref(n),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:S,onRowClick:y},{default:l.withCtx(()=>[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(s.columnList,(p,M)=>(l.openBlock(),l.createBlock(B,{key:M,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),[[l.vShow,l.unref(u)]])],32)}}}),[["__scopeId","data-v-2d4704ea"]]);d.install=s=>{s.component(d.name,d)};const _=[d],h=function(s){h.installed||_.forEach(c=>{s.component(c.name,c)})};typeof window<"u"&&window.Vue&&h(window.Vue);const I={install:h,..._};a.SelectTable=d,a.default=I,a.install=h,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "huiyi-select-table",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "select,table",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"types": "dist/index.d.ts",
|
|
6
7
|
"main": "dist/huiyi-select-table.umd.js",
|
|
7
8
|
"module": "dist/huiyi-select-table.es.js",
|
|
8
9
|
"files": ["dist"],
|
|
9
10
|
"scripts": {
|
|
10
11
|
"dev": "vite",
|
|
11
|
-
"build": "vite build && tsc --emitDeclarationOnly --declaration",
|
|
12
|
+
"build": "vite build --config vite.config.lib.ts && tsc --emitDeclarationOnly --declaration",
|
|
12
13
|
"prepublishOnly": "npm run build"
|
|
13
14
|
},
|
|
14
15
|
"dependencies": {
|
|
@@ -19,8 +20,8 @@
|
|
|
19
20
|
"@types/node": "^24.10.0",
|
|
20
21
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
21
22
|
"@vue/tsconfig": "^0.8.1",
|
|
22
|
-
"typescript": "
|
|
23
|
+
"typescript": "^5.7.3",
|
|
23
24
|
"vite": "^7.2.2",
|
|
24
|
-
"vue-tsc": "^
|
|
25
|
+
"vue-tsc": "^2.2.0"
|
|
25
26
|
}
|
|
26
|
-
}
|
|
27
|
+
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { defineComponent as I, resolveComponent as c, createBlock as f, openBlock as a, unref as w, isRef as L, withCtx as p, createElementBlock as _, Fragment as h, renderList as b, createVNode as O } from "vue";
|
|
2
|
-
const j = /* @__PURE__ */ I({
|
|
3
|
-
name: "InputSelectCom",
|
|
4
|
-
__name: "SelectTable",
|
|
5
|
-
props: {
|
|
6
|
-
originalData: Object,
|
|
7
|
-
showValue: String,
|
|
8
|
-
columnList: Object
|
|
9
|
-
},
|
|
10
|
-
emits: ["slectValue"],
|
|
11
|
-
setup(e, { emit: l }) {
|
|
12
|
-
const r = e, n = ref(""), u = ref(""), C = ref(!1), v = ref([]), d = ref([]);
|
|
13
|
-
ref(!1), ref(-1), ref(-1);
|
|
14
|
-
const V = ref(null), k = l, y = (t) => {
|
|
15
|
-
d.value = t;
|
|
16
|
-
}, x = (t) => {
|
|
17
|
-
d.value = t, t && (u.value = t[r.showValue], C.value = !1), k("slectValue", t);
|
|
18
|
-
};
|
|
19
|
-
return (t, m) => {
|
|
20
|
-
const R = c("el-table-column"), S = c("el-table"), T = c("el-option"), B = c("el-select");
|
|
21
|
-
return a(), f(B, {
|
|
22
|
-
modelValue: w(n),
|
|
23
|
-
"onUpdate:modelValue": m[0] || (m[0] = (o) => L(n) ? n.value = o : null),
|
|
24
|
-
filterable: "",
|
|
25
|
-
placeholder: "Select",
|
|
26
|
-
style: { width: "240px" }
|
|
27
|
-
}, {
|
|
28
|
-
default: p(() => [
|
|
29
|
-
(a(!0), _(h, null, b(e.originalData, (o) => (a(), f(T, {
|
|
30
|
-
key: o.name,
|
|
31
|
-
label: o.name,
|
|
32
|
-
value: o.name
|
|
33
|
-
}, {
|
|
34
|
-
default: p(() => [
|
|
35
|
-
O(S, {
|
|
36
|
-
ref_for: !0,
|
|
37
|
-
ref_key: "singleTableRef",
|
|
38
|
-
ref: V,
|
|
39
|
-
border: "",
|
|
40
|
-
class: "spanInputTable",
|
|
41
|
-
"row-class-name": t.tableRowClassName,
|
|
42
|
-
"highlight-current-row": "",
|
|
43
|
-
data: w(v),
|
|
44
|
-
style: { width: "300px", height: "230px", position: "fixed" },
|
|
45
|
-
onCurrentChange: y,
|
|
46
|
-
onRowClick: x
|
|
47
|
-
}, {
|
|
48
|
-
default: p(() => [
|
|
49
|
-
(a(!0), _(h, null, b(e.columnList, (i, D) => (a(), f(R, {
|
|
50
|
-
key: D,
|
|
51
|
-
prop: i.prop,
|
|
52
|
-
label: i.label,
|
|
53
|
-
width: i.width,
|
|
54
|
-
"show-overflow-tooltip": "",
|
|
55
|
-
align: "center"
|
|
56
|
-
}, null, 8, ["prop", "label", "width"]))), 128))
|
|
57
|
-
]),
|
|
58
|
-
_: 2
|
|
59
|
-
}, 1032, ["row-class-name", "data"])
|
|
60
|
-
]),
|
|
61
|
-
_: 2
|
|
62
|
-
}, 1032, ["label", "value"]))), 128))
|
|
63
|
-
]),
|
|
64
|
-
_: 1
|
|
65
|
-
}, 8, ["modelValue"]);
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
}), E = (e, l) => {
|
|
69
|
-
const r = e.__vccOpts || e;
|
|
70
|
-
for (const [n, u] of l)
|
|
71
|
-
r[n] = u;
|
|
72
|
-
return r;
|
|
73
|
-
}, s = /* @__PURE__ */ E(j, [["__scopeId", "data-v-3cde86ca"]]);
|
|
74
|
-
s.install = (e) => {
|
|
75
|
-
e.component(s.name, s);
|
|
76
|
-
};
|
|
77
|
-
const N = [
|
|
78
|
-
s
|
|
79
|
-
], g = function(e) {
|
|
80
|
-
g.installed || N.forEach((l) => {
|
|
81
|
-
e.component(l.name, l);
|
|
82
|
-
});
|
|
83
|
-
};
|
|
84
|
-
typeof window < "u" && window.Vue && g(window.Vue);
|
|
85
|
-
export {
|
|
86
|
-
s as SelectTable,
|
|
87
|
-
g as install
|
|
88
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
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 s=t.__vccOpts||t;for(const[c,f]of o)s[c]=f;return s})(e.defineComponent({name:"InputSelectCom",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(t,{emit:o}){const s=t,c=ref(""),f=ref(""),_=ref(!1),h=ref([]),d=ref([]);ref(!1),ref(-1),ref(-1);const w=ref(null),b=o,k=l=>{d.value=l},C=l=>{d.value=l,l&&(f.value=l[s.showValue],_.value=!1),b("slectValue",l)};return(l,u)=>{const g=e.resolveComponent("el-table-column"),y=e.resolveComponent("el-table"),V=e.resolveComponent("el-option"),x=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(x,{modelValue:e.unref(c),"onUpdate:modelValue":u[0]||(u[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(V,{key:r.name,label:r.name,value:r.name},{default:e.withCtx(()=>[e.createVNode(y,{ref_for:!0,ref_key:"singleTableRef",ref:w,border:"",class:"spanInputTable","row-class-name":l.tableRowClassName,"highlight-current-row":"",data:e.unref(h),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:k,onRowClick:C},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columnList,(p,B)=>(e.openBlock(),e.createBlock(g,{key:B,prop:p.prop,label:p.label,width:p.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 m=[a],i=function(t){i.installed||m.forEach(o=>{t.component(o.name,o)})};typeof window<"u"&&window.Vue&&i(window.Vue),n.SelectTable=a,n.install=i,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|