api-dict-select 0.1.0 → 0.1.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.
- package/README.md +2 -2
- package/dist/index.js +102 -104
- package/dist/index.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# `
|
|
1
|
+
# `dict-select`
|
|
2
2
|
|
|
3
3
|
一个可复用的下拉组件。传入接口方法后自动请求选项数据，支持缓存、联动参数、`label` 回传和多选。
|
|
4
4
|
|
|
@@ -38,7 +38,7 @@ npm publish --registry=http://your-registry
|
|
|
38
38
|
```ts
|
|
39
39
|
import { createApp } from 'vue';
|
|
40
40
|
import ElementPlus from 'element-plus';
|
|
41
|
-
import DictSelect from '
|
|
41
|
+
import DictSelect from 'dict-select';
|
|
42
42
|
import 'element-plus/dist/index.css';
|
|
43
43
|
|
|
44
44
|
const app = createApp(App);
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { defineComponent as z, useModel as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { defineComponent as z, useModel as f, ref as h, computed as U, watch as p, openBlock as B, createBlock as D, unref as L, withCtx as G, createElementBlock as H, Fragment as P, renderList as Q, mergeModels as N } from "vue";
|
|
2
|
+
import { ElSelect as W, ElOption as X } from "element-plus";
|
|
3
|
+
const M = /* @__PURE__ */ new Map(), Y = () => M, Z = (n) => {
|
|
4
|
+
if (n) {
|
|
5
|
+
M.delete(n);
|
|
5
6
|
return;
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
+
M.clear();
|
|
8
9
|
}, I = /* @__PURE__ */ z({
|
|
9
10
|
__name: "DictSelect",
|
|
10
11
|
props: /* @__PURE__ */ N({
|
|
@@ -42,23 +43,23 @@ const O = /* @__PURE__ */ new Map(), Q = () => O, W = (u) => {
|
|
|
42
43
|
selectedOptionModifiers: {}
|
|
43
44
|
}),
|
|
44
45
|
emits: /* @__PURE__ */ N(["label", "allData", "options", "loaded", "error", "onClear"], ["update:modelValue", "update:options", "update:response", "update:loading", "update:selectedOption"]),
|
|
45
|
-
setup(
|
|
46
|
-
const e =
|
|
47
|
-
let
|
|
48
|
-
const
|
|
49
|
-
var a,
|
|
50
|
-
return ((a = l == null ? void 0 : l.result) == null ? void 0 : a.list) || ((
|
|
46
|
+
setup(n, { expose: w, emit: E }) {
|
|
47
|
+
const e = n, u = f(n, "modelValue"), O = f(n, "options"), T = f(n, "response"), K = f(n, "loading"), A = f(n, "selectedOption"), i = h([]), v = h(!1), r = h(), b = Y();
|
|
48
|
+
let m = 0;
|
|
49
|
+
const s = E, k = (l) => {
|
|
50
|
+
var a, t, o;
|
|
51
|
+
return ((a = l == null ? void 0 : l.result) == null ? void 0 : a.list) || ((t = l == null ? void 0 : l.result) == null ? void 0 : t.data) || ((o = l == null ? void 0 : l.result) == null ? void 0 : o.result) || (l == null ? void 0 : l.result) || (l == null ? void 0 : l.data) || l || [];
|
|
51
52
|
}, F = () => !e.param || Object.keys(e.param).length === 0 ? !0 : Object.values(e.param).every(
|
|
52
53
|
(l) => l != null && l !== ""
|
|
53
|
-
),
|
|
54
|
+
), C = () => {
|
|
54
55
|
var a;
|
|
55
56
|
return `${e.cacheKey || ((a = e.api) == null ? void 0 : a.name) || "dict-select"}:${JSON.stringify(e.param || {})}`;
|
|
56
|
-
},
|
|
57
|
-
(l) =>
|
|
58
|
-
) : [] :
|
|
59
|
-
(l) => l[e.optionValue] ===
|
|
60
|
-
),
|
|
61
|
-
|
|
57
|
+
}, c = () => e.multiple ? Array.isArray(u.value) ? i.value.filter(
|
|
58
|
+
(l) => u.value.includes(l[e.optionValue])
|
|
59
|
+
) : [] : i.value.find(
|
|
60
|
+
(l) => l[e.optionValue] === u.value
|
|
61
|
+
), d = () => {
|
|
62
|
+
O.value = i.value, T.value = r.value, K.value = v.value, A.value = c();
|
|
62
63
|
}, j = (l) => {
|
|
63
64
|
e.vModelToNumber && l.forEach((a) => {
|
|
64
65
|
a[e.optionValue] = Number(a[e.optionValue]);
|
|
@@ -69,146 +70,143 @@ const O = /* @__PURE__ */ new Map(), Q = () => O, W = (u) => {
|
|
|
69
70
|
if (!e.autoClearInvalidValue)
|
|
70
71
|
return;
|
|
71
72
|
if (e.multiple) {
|
|
72
|
-
if (Array.isArray(
|
|
73
|
-
const a =
|
|
74
|
-
(
|
|
73
|
+
if (Array.isArray(u.value) && u.value.length > 0) {
|
|
74
|
+
const a = u.value.filter(
|
|
75
|
+
(t) => i.value.some((o) => o[e.optionValue] === t)
|
|
75
76
|
);
|
|
76
|
-
a.length !==
|
|
77
|
+
a.length !== u.value.length && (u.value = a);
|
|
77
78
|
}
|
|
78
79
|
return;
|
|
79
80
|
}
|
|
80
|
-
|
|
81
|
-
(a) => a[e.optionValue] ===
|
|
82
|
-
) === -1 && (
|
|
81
|
+
i.value.findIndex(
|
|
82
|
+
(a) => a[e.optionValue] === u.value
|
|
83
|
+
) === -1 && (u.value = void 0);
|
|
83
84
|
}, R = () => {
|
|
84
|
-
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
options:
|
|
88
|
-
response:
|
|
89
|
-
fromCache:
|
|
85
|
+
s("onClear");
|
|
86
|
+
}, y = (l, a, t) => {
|
|
87
|
+
i.value = l, r.value = a, j(i.value), J(), d(), s("loaded", {
|
|
88
|
+
options: i.value,
|
|
89
|
+
response: r.value,
|
|
90
|
+
fromCache: t
|
|
90
91
|
});
|
|
91
|
-
},
|
|
92
|
+
}, g = async (l = !1) => {
|
|
92
93
|
if (e.mock.length > 0) {
|
|
93
|
-
|
|
94
|
+
y(e.mock, e.mock, !1);
|
|
94
95
|
return;
|
|
95
96
|
}
|
|
96
97
|
if (!e.api) {
|
|
97
|
-
|
|
98
|
+
i.value = [], r.value = void 0, d();
|
|
98
99
|
return;
|
|
99
100
|
}
|
|
100
101
|
if (!e.callApiIfNeeded || !F()) {
|
|
101
|
-
|
|
102
|
+
i.value = [], r.value = void 0, d();
|
|
102
103
|
return;
|
|
103
104
|
}
|
|
104
|
-
const a =
|
|
105
|
-
if (!l && e.isBuffer &&
|
|
106
|
-
const
|
|
107
|
-
|
|
105
|
+
const a = C();
|
|
106
|
+
if (!l && e.isBuffer && b.has(a)) {
|
|
107
|
+
const o = b.get(a);
|
|
108
|
+
y((o == null ? void 0 : o.options) || [], o == null ? void 0 : o.response, !0);
|
|
108
109
|
return;
|
|
109
110
|
}
|
|
110
|
-
const
|
|
111
|
-
|
|
111
|
+
const t = ++m;
|
|
112
|
+
v.value = !0, d();
|
|
112
113
|
try {
|
|
113
|
-
const
|
|
114
|
-
if (
|
|
114
|
+
const o = await e.api(e.param);
|
|
115
|
+
if (t !== m)
|
|
115
116
|
return;
|
|
116
|
-
const
|
|
117
|
-
e.isBuffer &&
|
|
117
|
+
const S = e.transform ? e.transform(k(o), o) : k(o), x = Array.isArray(S) ? S : [];
|
|
118
|
+
e.isBuffer && b.set(a, {
|
|
118
119
|
options: x,
|
|
119
|
-
response:
|
|
120
|
-
}),
|
|
121
|
-
} catch (
|
|
122
|
-
if (
|
|
120
|
+
response: o
|
|
121
|
+
}), y(x, o, !1);
|
|
122
|
+
} catch (o) {
|
|
123
|
+
if (t !== m)
|
|
123
124
|
return;
|
|
124
|
-
|
|
125
|
+
s("error", o), i.value = [], r.value = void 0, d();
|
|
125
126
|
} finally {
|
|
126
|
-
|
|
127
|
+
t === m && (v.value = !1, d());
|
|
127
128
|
}
|
|
128
129
|
}, q = async (l = !0) => {
|
|
129
|
-
await
|
|
130
|
+
await g(l);
|
|
130
131
|
}, $ = () => {
|
|
131
|
-
|
|
132
|
-
},
|
|
132
|
+
Z(C());
|
|
133
|
+
}, V = U(() => {
|
|
133
134
|
if (e.multiple) {
|
|
134
|
-
const a =
|
|
135
|
-
return Array.isArray(a) ? a.map((
|
|
135
|
+
const a = c();
|
|
136
|
+
return Array.isArray(a) ? a.map((t) => t[e.optionLabel]) : [];
|
|
136
137
|
}
|
|
137
|
-
const l =
|
|
138
|
+
const l = c();
|
|
138
139
|
return !l || Array.isArray(l) ? "" : l[e.optionLabel] ?? "";
|
|
139
140
|
});
|
|
140
|
-
return
|
|
141
|
-
() =>
|
|
141
|
+
return p(
|
|
142
|
+
() => i.value,
|
|
142
143
|
() => {
|
|
143
|
-
|
|
144
|
+
s("options", i.value), O.value = i.value;
|
|
144
145
|
}
|
|
145
|
-
),
|
|
146
|
+
), p(
|
|
146
147
|
() => e.mock,
|
|
147
148
|
() => {
|
|
148
149
|
if (e.mock.length > 0) {
|
|
149
|
-
|
|
150
|
+
y(e.mock, e.mock, !1);
|
|
150
151
|
return;
|
|
151
152
|
}
|
|
152
|
-
e.api || (
|
|
153
|
+
e.api || (i.value = [], r.value = void 0, d());
|
|
153
154
|
}
|
|
154
|
-
),
|
|
155
|
+
), p(
|
|
155
156
|
() => e.api,
|
|
156
157
|
() => {
|
|
157
|
-
e.immediate &&
|
|
158
|
+
e.immediate && g();
|
|
158
159
|
},
|
|
159
160
|
{ immediate: e.immediate }
|
|
160
|
-
),
|
|
161
|
+
), p(
|
|
161
162
|
() => e.param,
|
|
162
163
|
(l, a) => {
|
|
163
|
-
JSON.stringify(l) !== JSON.stringify(a) &&
|
|
164
|
+
JSON.stringify(l) !== JSON.stringify(a) && g();
|
|
164
165
|
},
|
|
165
166
|
{ deep: !0 }
|
|
166
|
-
),
|
|
167
|
-
() => [
|
|
167
|
+
), p(
|
|
168
|
+
() => [u.value, i.value],
|
|
168
169
|
() => {
|
|
169
|
-
const l =
|
|
170
|
-
|
|
170
|
+
const l = c();
|
|
171
|
+
A.value = l, e.isLabel && s(
|
|
171
172
|
"label",
|
|
172
|
-
Array.isArray(
|
|
173
|
-
),
|
|
173
|
+
Array.isArray(V.value) ? V.value.join(",") : V.value
|
|
174
|
+
), s("allData", l);
|
|
174
175
|
},
|
|
175
176
|
{ immediate: !0, deep: !0 }
|
|
176
177
|
), w({
|
|
177
178
|
refresh: q,
|
|
178
179
|
clearCache: $,
|
|
179
|
-
getOptions: () =>
|
|
180
|
-
getResponse: () =>
|
|
181
|
-
getSelectedOption:
|
|
182
|
-
}), (l, a) => {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
_: 1
|
|
204
|
-
}, 8, ["modelValue", "filterable", "disabled", "placeholder", "clearable", "multiple", "loading"]);
|
|
205
|
-
};
|
|
180
|
+
getOptions: () => i.value,
|
|
181
|
+
getResponse: () => r.value,
|
|
182
|
+
getSelectedOption: c
|
|
183
|
+
}), (l, a) => (B(), D(L(W), {
|
|
184
|
+
modelValue: u.value,
|
|
185
|
+
"onUpdate:modelValue": a[0] || (a[0] = (t) => u.value = t),
|
|
186
|
+
filterable: e.filter,
|
|
187
|
+
disabled: e.disabled,
|
|
188
|
+
placeholder: e.placeholder,
|
|
189
|
+
clearable: e.clearable,
|
|
190
|
+
multiple: e.multiple,
|
|
191
|
+
loading: v.value,
|
|
192
|
+
onClear: R
|
|
193
|
+
}, {
|
|
194
|
+
default: G(() => [
|
|
195
|
+
(B(!0), H(P, null, Q(i.value, (t) => (B(), D(L(X), {
|
|
196
|
+
key: t[e.optionValue],
|
|
197
|
+
label: t[e.optionLabel],
|
|
198
|
+
value: t[e.optionValue],
|
|
199
|
+
disabled: t[e.optionDisabledField] === e.optionDisabledValue
|
|
200
|
+
}, null, 8, ["label", "value", "disabled"]))), 128))
|
|
201
|
+
]),
|
|
202
|
+
_: 1
|
|
203
|
+
}, 8, ["modelValue", "filterable", "disabled", "placeholder", "clearable", "multiple", "loading"]));
|
|
206
204
|
}
|
|
207
|
-
}),
|
|
208
|
-
|
|
209
|
-
|
|
205
|
+
}), _ = I;
|
|
206
|
+
_.install = (n) => {
|
|
207
|
+
n.component("DictSelect", I);
|
|
210
208
|
};
|
|
211
209
|
export {
|
|
212
210
|
I as DictSelect,
|
|
213
|
-
|
|
211
|
+
_ as default
|
|
214
212
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(d,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],t):(d=typeof globalThis<"u"?globalThis:d||self,t(d.DictSelect={},d.Vue,d.ElementPlus))})(this,function(d,t,B){"use strict";const b=new Map,x=()=>b,L=r=>{if(r){b.delete(r);return}b.clear()},g=t.defineComponent({__name:"DictSelect",props:t.mergeModels({placeholder:{default:"全部"},disabled:{type:Boolean,default:!1},optionLabel:{default:"k"},optionValue:{default:"v"},optionDisabledField:{default:"text"},optionDisabledValue:{type:[String,Number,Boolean],default:"disable"},filter:{type:Boolean,default:!1},clearable:{type:Boolean,default:!0},vModelToNumber:{type:Boolean,default:!1},vModelToString:{type:Boolean,default:!1},isBuffer:{type:Boolean,default:!0},isLabel:{type:Boolean,default:!1},api:{},mock:{default:()=>[]},multiple:{type:Boolean,default:!1},param:{default:()=>({})},callApiIfNeeded:{type:Boolean,default:!0},cacheKey:{default:""},transform:{type:Function,default:void 0},immediate:{type:Boolean,default:!0},autoClearInvalidValue:{type:Boolean,default:!0}},{modelValue:{},modelModifiers:{},options:{},optionsModifiers:{},response:{},responseModifiers:{},loading:{type:Boolean},loadingModifiers:{},selectedOption:{},selectedOptionModifiers:{}}),emits:t.mergeModels(["label","allData","options","loaded","error","onClear"],["update:modelValue","update:options","update:response","update:loading","update:selectedOption"]),setup(r,{expose:N,emit:T}){const e=r,u=t.useModel(r,"modelValue"),k=t.useModel(r,"options"),E=t.useModel(r,"response"),I=t.useModel(r,"loading"),S=t.useModel(r,"selectedOption"),n=t.ref([]),m=t.ref(!1),s=t.ref(),h=x();let v=0;const f=T,A=l=>{var a,o,i;return((a=l==null?void 0:l.result)==null?void 0:a.list)||((o=l==null?void 0:l.result)==null?void 0:o.data)||((i=l==null?void 0:l.result)==null?void 0:i.result)||(l==null?void 0:l.result)||(l==null?void 0:l.data)||l||[]},j=()=>!e.param||Object.keys(e.param).length===0?!0:Object.values(e.param).every(l=>l!=null&&l!==""),C=()=>{var a;return`${e.cacheKey||((a=e.api)==null?void 0:a.name)||"dict-select"}:${JSON.stringify(e.param||{})}`},p=()=>e.multiple?Array.isArray(u.value)?n.value.filter(l=>u.value.includes(l[e.optionValue])):[]:n.value.find(l=>l[e.optionValue]===u.value),c=()=>{k.value=n.value,E.value=s.value,I.value=m.value,S.value=p()},K=l=>{e.vModelToNumber&&l.forEach(a=>{a[e.optionValue]=Number(a[e.optionValue])}),e.vModelToString&&l.forEach(a=>{a[e.optionValue]=String(a[e.optionValue])})},q=()=>{if(!e.autoClearInvalidValue)return;if(e.multiple){if(Array.isArray(u.value)&&u.value.length>0){const a=u.value.filter(o=>n.value.some(i=>i[e.optionValue]===o));a.length!==u.value.length&&(u.value=a)}return}n.value.findIndex(a=>a[e.optionValue]===u.value)===-1&&(u.value=void 0)},F=()=>{f("onClear")},y=(l,a,o)=>{n.value=l,s.value=a,K(n.value),q(),c(),f("loaded",{options:n.value,response:s.value,fromCache:o})},V=async(l=!1)=>{if(e.mock.length>0){y(e.mock,e.mock,!1);return}if(!e.api){n.value=[],s.value=void 0,c();return}if(!e.callApiIfNeeded||!j()){n.value=[],s.value=void 0,c();return}const a=C();if(!l&&e.isBuffer&&h.has(a)){const i=h.get(a);y((i==null?void 0:i.options)||[],i==null?void 0:i.response,!0);return}const o=++v;m.value=!0,c();try{const i=await e.api(e.param);if(o!==v)return;const D=e.transform?e.transform(A(i),i):A(i),w=Array.isArray(D)?D:[];e.isBuffer&&h.set(a,{options:w,response:i}),y(w,i,!1)}catch(i){if(o!==v)return;f("error",i),n.value=[],s.value=void 0,c()}finally{o===v&&(m.value=!1,c())}},J=async(l=!0)=>{await V(l)},R=()=>{L(C())},M=t.computed(()=>{if(e.multiple){const a=p();return Array.isArray(a)?a.map(o=>o[e.optionLabel]):[]}const l=p();return!l||Array.isArray(l)?"":l[e.optionLabel]??""});return t.watch(()=>n.value,()=>{f("options",n.value),k.value=n.value}),t.watch(()=>e.mock,()=>{if(e.mock.length>0){y(e.mock,e.mock,!1);return}e.api||(n.value=[],s.value=void 0,c())}),t.watch(()=>e.api,()=>{e.immediate&&V()},{immediate:e.immediate}),t.watch(()=>e.param,(l,a)=>{JSON.stringify(l)!==JSON.stringify(a)&&V()},{deep:!0}),t.watch(()=>[u.value,n.value],()=>{const l=p();S.value=l,e.isLabel&&f("label",Array.isArray(M.value)?M.value.join(","):M.value),f("allData",l)},{immediate:!0,deep:!0}),N({refresh:J,clearCache:R,getOptions:()=>n.value,getResponse:()=>s.value,getSelectedOption:p}),(l,a)=>(t.openBlock(),t.createBlock(t.unref(B.ElSelect),{modelValue:u.value,"onUpdate:modelValue":a[0]||(a[0]=o=>u.value=o),filterable:e.filter,disabled:e.disabled,placeholder:e.placeholder,clearable:e.clearable,multiple:e.multiple,loading:m.value,onClear:F},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,o=>(t.openBlock(),t.createBlock(t.unref(B.ElOption),{key:o[e.optionValue],label:o[e.optionLabel],value:o[e.optionValue],disabled:o[e.optionDisabledField]===e.optionDisabledValue},null,8,["label","value","disabled"]))),128))]),_:1},8,["modelValue","filterable","disabled","placeholder","clearable","multiple","loading"]))}}),O=g;O.install=r=>{r.component("DictSelect",g)},d.DictSelect=g,d.default=O,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|