@jetlinks-web/components 3.2.5 → 3.2.7
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/es/AutoComplete/AutoComplete.js +162 -42
- package/es/ProLayout/Basic/BasicLayout.js +2 -0
- package/es/ProLayout/Basic/Header.js +7 -0
- package/es/ProLayout/TopHeader/index.js +10 -1
- package/es/ProLayout/TopHeader/style.js +5 -1
- package/lib/AutoComplete/AutoComplete.js +162 -42
- package/lib/ProLayout/Basic/BasicLayout.js +2 -0
- package/lib/ProLayout/Basic/Header.js +7 -0
- package/lib/ProLayout/TopHeader/index.js +10 -1
- package/lib/ProLayout/TopHeader/style.js +5 -1
- package/package.json +2 -2
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) {
|
|
2
|
+
return lhs;
|
|
3
|
+
}
|
|
4
|
+
else {
|
|
5
|
+
return rhsFn();
|
|
6
|
+
} }
|
|
1
7
|
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
|
|
2
8
|
const op = ops[i];
|
|
3
9
|
const fn = ops[i + 1];
|
|
@@ -17,6 +23,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
17
23
|
/* Analyzed bindings: {
|
|
18
24
|
"searchKey": "props",
|
|
19
25
|
"multiple": "props",
|
|
26
|
+
"AutoComplete": "setup-maybe-ref",
|
|
20
27
|
"Select": "setup-maybe-ref",
|
|
21
28
|
"selectProps": "setup-maybe-ref",
|
|
22
29
|
"ref": "setup-const",
|
|
@@ -25,15 +32,27 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
25
32
|
"props": "setup-reactive-const",
|
|
26
33
|
"emit": "setup-const",
|
|
27
34
|
"myValue": "setup-ref",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
35
|
+
"searchValue": "setup-ref",
|
|
36
|
+
"customOptions": "setup-ref",
|
|
37
|
+
"isEmpty": "setup-const",
|
|
38
|
+
"normalizeText": "setup-const",
|
|
39
|
+
"isOptionMatched": "setup-const",
|
|
40
|
+
"isOptionContainsKeyword": "setup-const",
|
|
41
|
+
"componentProps": "setup-ref",
|
|
42
|
+
"mergedOptions": "setup-ref",
|
|
43
|
+
"displayOptions": "setup-ref",
|
|
44
|
+
"appendCustomOption": "setup-const",
|
|
31
45
|
"handleSearch": "setup-const",
|
|
32
|
-
"
|
|
46
|
+
"resetSearchValue": "setup-const",
|
|
47
|
+
"handleMultipleChange": "setup-const",
|
|
48
|
+
"handleSingleChange": "setup-const",
|
|
49
|
+
"handleSingleBlur": "setup-const",
|
|
50
|
+
"onSelect": "setup-const",
|
|
51
|
+
"normalizeValueByMode": "setup-const"
|
|
33
52
|
} */
|
|
34
53
|
import { defineComponent as _defineComponent } from 'vue';
|
|
35
|
-
import { unref as _unref, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock } from "vue";
|
|
36
|
-
import { Select } from 'ant-design-vue';
|
|
54
|
+
import { unref as _unref, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, } from "vue";
|
|
55
|
+
import { AutoComplete, Select } from 'ant-design-vue';
|
|
37
56
|
import { selectProps } from 'ant-design-vue/lib/select';
|
|
38
57
|
import { ref, watch, computed, } from 'vue';
|
|
39
58
|
const __sfc_main__ = _defineComponent({
|
|
@@ -56,52 +75,153 @@ const __sfc_main__ = _defineComponent({
|
|
|
56
75
|
const props = __props;
|
|
57
76
|
const emit = __emit;
|
|
58
77
|
const myValue = ref();
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
78
|
+
const searchValue = ref('');
|
|
79
|
+
const customOptions = ref([]);
|
|
80
|
+
const isEmpty = (val) => val === undefined || val === null || val === '';
|
|
81
|
+
const normalizeText = (val) => {
|
|
82
|
+
if (isEmpty(val)) {
|
|
83
|
+
return '';
|
|
64
84
|
}
|
|
85
|
+
if (typeof val === 'object' && val !== null && 'value' in val) {
|
|
86
|
+
return String(_nullishCoalesce(val.value, () => (''))).trim();
|
|
87
|
+
}
|
|
88
|
+
return String(val).trim();
|
|
89
|
+
};
|
|
90
|
+
const isOptionMatched = (option, keyword) => {
|
|
91
|
+
const optionValue = normalizeText(_optionalChain([option, 'optionalAccess', _ => _.value]));
|
|
92
|
+
const optionLabel = normalizeText(_nullishCoalesce(_optionalChain([option, 'optionalAccess', _2 => _2[props.searchKey]]), () => (_optionalChain([option, 'optionalAccess', _3 => _3.label]))));
|
|
93
|
+
return optionValue === keyword || optionLabel === keyword;
|
|
94
|
+
};
|
|
95
|
+
const isOptionContainsKeyword = (option, keyword) => {
|
|
96
|
+
const optionValue = normalizeText(_optionalChain([option, 'optionalAccess', _4 => _4.value]));
|
|
97
|
+
const optionLabel = normalizeText(_nullishCoalesce(_optionalChain([option, 'optionalAccess', _5 => _5[props.searchKey]]), () => (_optionalChain([option, 'optionalAccess', _6 => _6.label]))));
|
|
98
|
+
return optionValue.includes(keyword) || optionLabel.includes(keyword);
|
|
65
99
|
};
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
100
|
+
const componentProps = computed(() => {
|
|
101
|
+
const { multiple, searchKey, options, value, mode, ...rest } = props;
|
|
102
|
+
return rest;
|
|
103
|
+
});
|
|
104
|
+
const mergedOptions = computed(() => {
|
|
105
|
+
const baseOptions = Array.isArray(props.options)
|
|
106
|
+
? (props.options)
|
|
107
|
+
: [];
|
|
108
|
+
const result = [];
|
|
109
|
+
const keys = new Set();
|
|
110
|
+
[...customOptions.value, ...baseOptions].forEach((option) => {
|
|
111
|
+
const key = normalizeText(_optionalChain([option, 'optionalAccess', _7 => _7.value]) || _optionalChain([option, 'optionalAccess', _8 => _8[props.searchKey]]) || _optionalChain([option, 'optionalAccess', _9 => _9.label]));
|
|
112
|
+
if (!key || keys.has(key)) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
keys.add(key);
|
|
116
|
+
result.push(option);
|
|
117
|
+
});
|
|
118
|
+
return result;
|
|
119
|
+
});
|
|
120
|
+
const displayOptions = computed(() => {
|
|
121
|
+
const keyword = normalizeText(searchValue.value);
|
|
122
|
+
if (!keyword) {
|
|
123
|
+
return mergedOptions.value;
|
|
71
124
|
}
|
|
72
|
-
|
|
73
|
-
|
|
125
|
+
const matchedOptions = mergedOptions.value.filter((option) => isOptionContainsKeyword(option, keyword));
|
|
126
|
+
const exists = mergedOptions.value.some((option) => isOptionMatched(option, keyword));
|
|
127
|
+
if (exists) {
|
|
128
|
+
return matchedOptions;
|
|
129
|
+
}
|
|
130
|
+
return [{ label: keyword, value: keyword }, ...matchedOptions];
|
|
74
131
|
});
|
|
75
|
-
const
|
|
76
|
-
|
|
132
|
+
const appendCustomOption = (val) => {
|
|
133
|
+
const keyword = normalizeText(val);
|
|
134
|
+
if (!keyword) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
const exists = mergedOptions.value.some((option) => isOptionMatched(option, keyword));
|
|
138
|
+
if (exists) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
customOptions.value = [{ label: keyword, value: keyword }, ...customOptions.value];
|
|
142
|
+
};
|
|
143
|
+
const handleSearch = (val) => {
|
|
144
|
+
searchValue.value = normalizeText(val);
|
|
145
|
+
};
|
|
146
|
+
const resetSearchValue = () => {
|
|
147
|
+
searchValue.value = '';
|
|
148
|
+
};
|
|
149
|
+
const handleMultipleChange = (val) => {
|
|
150
|
+
const nextValue = Array.isArray(val)
|
|
151
|
+
? val
|
|
152
|
+
: isEmpty(val)
|
|
153
|
+
? []
|
|
154
|
+
: [val];
|
|
155
|
+
nextValue.forEach((item) => appendCustomOption(item));
|
|
156
|
+
myValue.value = nextValue;
|
|
157
|
+
resetSearchValue();
|
|
158
|
+
emit('update:value', nextValue);
|
|
159
|
+
emit('change', nextValue);
|
|
160
|
+
};
|
|
161
|
+
const handleSingleChange = (val) => {
|
|
162
|
+
const nextValue = isEmpty(val) ? undefined : val;
|
|
163
|
+
myValue.value = nextValue;
|
|
164
|
+
emit('update:value', nextValue);
|
|
165
|
+
emit('change', nextValue);
|
|
166
|
+
};
|
|
167
|
+
const handleSingleBlur = () => {
|
|
168
|
+
appendCustomOption(myValue.value);
|
|
169
|
+
resetSearchValue();
|
|
77
170
|
};
|
|
78
171
|
const onSelect = (val, option) => {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
172
|
+
appendCustomOption(val);
|
|
173
|
+
resetSearchValue();
|
|
174
|
+
emit('select', val, option);
|
|
175
|
+
};
|
|
176
|
+
const normalizeValueByMode = (val) => {
|
|
177
|
+
if (isEmpty(val)) {
|
|
178
|
+
return props.multiple ? [] : undefined;
|
|
179
|
+
}
|
|
180
|
+
if (props.multiple) {
|
|
181
|
+
return Array.isArray(val) ? val : [val];
|
|
84
182
|
}
|
|
85
|
-
|
|
86
|
-
emit('update:value', _val);
|
|
87
|
-
emit('select', _val, _option);
|
|
183
|
+
return Array.isArray(val) ? val[val.length - 1] : val;
|
|
88
184
|
};
|
|
89
|
-
watch(() => props.value, (val) => {
|
|
90
|
-
|
|
185
|
+
watch([() => props.value, () => props.multiple], ([val]) => {
|
|
186
|
+
const nextValue = normalizeValueByMode(val);
|
|
187
|
+
myValue.value = nextValue;
|
|
188
|
+
if (Array.isArray(nextValue)) {
|
|
189
|
+
nextValue.forEach((item) => appendCustomOption(item));
|
|
190
|
+
}
|
|
191
|
+
else {
|
|
192
|
+
if (!props.multiple &&
|
|
193
|
+
normalizeText(nextValue) === normalizeText(searchValue.value)) {
|
|
194
|
+
return;
|
|
195
|
+
}
|
|
196
|
+
appendCustomOption(nextValue);
|
|
197
|
+
}
|
|
91
198
|
}, { immediate: true });
|
|
92
199
|
return (_ctx, _cache) => {
|
|
93
|
-
return (
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
200
|
+
return (props.multiple)
|
|
201
|
+
? (_openBlock(), _createBlock(_unref(Select), _mergeProps({
|
|
202
|
+
key: 0,
|
|
203
|
+
value: myValue.value,
|
|
204
|
+
allowClear: ""
|
|
205
|
+
}, componentProps.value, {
|
|
206
|
+
mode: "tags",
|
|
207
|
+
options: displayOptions.value,
|
|
208
|
+
style: { "width": "100%" },
|
|
209
|
+
onSelect: onSelect,
|
|
210
|
+
onSearch: handleSearch,
|
|
211
|
+
onChange: handleMultipleChange
|
|
212
|
+
}), null, 16 /* FULL_PROPS */, ["value", "options"]))
|
|
213
|
+
: (_openBlock(), _createBlock(_unref(AutoComplete), _mergeProps({
|
|
214
|
+
key: 1,
|
|
215
|
+
value: myValue.value,
|
|
216
|
+
allowClear: ""
|
|
217
|
+
}, componentProps.value, {
|
|
218
|
+
options: displayOptions.value,
|
|
219
|
+
style: { "width": "100%" },
|
|
220
|
+
onSelect: onSelect,
|
|
221
|
+
onSearch: handleSearch,
|
|
222
|
+
onChange: handleSingleChange,
|
|
223
|
+
onBlur: handleSingleBlur
|
|
224
|
+
}), null, 16 /* FULL_PROPS */, ["value", "options"]));
|
|
105
225
|
};
|
|
106
226
|
}
|
|
107
227
|
});
|
|
@@ -210,6 +210,7 @@ export default defineComponent({
|
|
|
210
210
|
var collapsedButtonRender = getSlot(slots, props, 'collapsedButtonRender');
|
|
211
211
|
var headerContentRender = getSlot(slots, props, 'headerContentRender');
|
|
212
212
|
var rightContentRender = getSlot(slots, props, 'rightContentRender');
|
|
213
|
+
var leftContentRender = getSlot(slots, props, 'leftContentRender');
|
|
213
214
|
var customHeaderRender = getSlot(slots, props, 'headerRender');
|
|
214
215
|
// menu
|
|
215
216
|
var menuHeaderRender = getSlot(slots, props, 'menuHeaderRender');
|
|
@@ -232,6 +233,7 @@ export default defineComponent({
|
|
|
232
233
|
onSelect: onSelect,
|
|
233
234
|
onMenuHeaderClick: onMenuHeaderClick,
|
|
234
235
|
rightContentRender: rightContentRender,
|
|
236
|
+
leftContentRender: leftContentRender,
|
|
235
237
|
collapsedButtonRender: collapsedButtonRender,
|
|
236
238
|
headerTitleRender: menuHeaderRender,
|
|
237
239
|
menuExtraRender: menuExtraRender,
|
|
@@ -26,6 +26,12 @@ export var headerViewProps = _objectSpread(_objectSpread({}, baseHeaderProps), {
|
|
|
26
26
|
return undefined;
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
+
leftContentRender: {
|
|
30
|
+
type: [Object, Function, Boolean],
|
|
31
|
+
default: function _default() {
|
|
32
|
+
return undefined;
|
|
33
|
+
}
|
|
34
|
+
},
|
|
29
35
|
hasSiderMenu: PropTypes.looseBool,
|
|
30
36
|
siderWidth: PropTypes.number.def(208)
|
|
31
37
|
});
|
|
@@ -56,6 +62,7 @@ export default defineComponent({
|
|
|
56
62
|
"theme": theme.value,
|
|
57
63
|
"mode": "horizontal"
|
|
58
64
|
}, props), {}, {
|
|
65
|
+
"leftContentRender": props.leftContentRender,
|
|
59
66
|
"onCollapse": onCollapse.value,
|
|
60
67
|
"menuData": context.menuData
|
|
61
68
|
}), null);
|
|
@@ -50,6 +50,12 @@ export var baseHeaderProps = _objectSpread(_objectSpread({}, defaultSettingProps
|
|
|
50
50
|
return undefined;
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
|
+
leftContentRender: {
|
|
54
|
+
type: [Object, Function],
|
|
55
|
+
default: function _default() {
|
|
56
|
+
return undefined;
|
|
57
|
+
}
|
|
58
|
+
},
|
|
53
59
|
collapsedButtonRender: siderMenuProps.collapsedButtonRender,
|
|
54
60
|
matchMenuKeys: siderMenuProps.matchMenuKeys,
|
|
55
61
|
// events
|
|
@@ -90,6 +96,7 @@ export var TopNavHeader = function TopNavHeader(props) {
|
|
|
90
96
|
onOpenKeys = props.onOpenKeys,
|
|
91
97
|
onSelect = props.onSelect,
|
|
92
98
|
contentWidth = props.contentWidth,
|
|
99
|
+
leftContentRender = props.leftContentRender,
|
|
93
100
|
rightContentRender = props.rightContentRender,
|
|
94
101
|
topHeaderMenuRender = props.topHeaderMenuRender,
|
|
95
102
|
layout = props.layout,
|
|
@@ -146,7 +153,9 @@ export var TopNavHeader = function TopNavHeader(props) {
|
|
|
146
153
|
"class": "".concat(prefixCls, "-logo"),
|
|
147
154
|
"key": "logo",
|
|
148
155
|
"id": "logo"
|
|
149
|
-
}, [headerDom])]), _createVNode("div", {
|
|
156
|
+
}, [headerDom])]), leftContentRender && _createVNode("div", {
|
|
157
|
+
"class": "".concat(prefixCls, "-left-content")
|
|
158
|
+
}, [typeof leftContentRender === 'function' ? leftContentRender(_objectSpread({}, props)) : leftContentRender]), _createVNode("div", {
|
|
150
159
|
"style": {
|
|
151
160
|
flex: 1
|
|
152
161
|
},
|
|
@@ -84,13 +84,17 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
|
|
|
84
84
|
}
|
|
85
85
|
}), '.anticon', {
|
|
86
86
|
color: 'inherit'
|
|
87
|
-
})), "".concat(topNavHeaderCls, "-main"), _defineProperty({
|
|
87
|
+
})), "".concat(topNavHeaderCls, "-main"), _defineProperty(_defineProperty({
|
|
88
88
|
display: 'flex',
|
|
89
89
|
height: '100%',
|
|
90
90
|
paddingLeft: '16px'
|
|
91
91
|
}, "".concat(topNavHeaderCls, "-main-left"), {
|
|
92
92
|
display: 'flex',
|
|
93
93
|
minWidth: '192px'
|
|
94
|
+
}), "".concat(topNavHeaderCls, "-left-content"), {
|
|
95
|
+
display: 'flex',
|
|
96
|
+
alignItems: 'center',
|
|
97
|
+
marginInlineEnd: '16px'
|
|
94
98
|
})), '.anticon', {
|
|
95
99
|
color: '#fff'
|
|
96
100
|
}), "".concat(topNavHeaderCls, "-logo"), {
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) {
|
|
2
|
+
return lhs;
|
|
3
|
+
}
|
|
4
|
+
else {
|
|
5
|
+
return rhsFn();
|
|
6
|
+
} }
|
|
1
7
|
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
|
|
2
8
|
const op = ops[i];
|
|
3
9
|
const fn = ops[i + 1];
|
|
@@ -17,6 +23,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
17
23
|
/* Analyzed bindings: {
|
|
18
24
|
"searchKey": "props",
|
|
19
25
|
"multiple": "props",
|
|
26
|
+
"AutoComplete": "setup-maybe-ref",
|
|
20
27
|
"Select": "setup-maybe-ref",
|
|
21
28
|
"selectProps": "setup-maybe-ref",
|
|
22
29
|
"ref": "setup-const",
|
|
@@ -25,15 +32,27 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
25
32
|
"props": "setup-reactive-const",
|
|
26
33
|
"emit": "setup-const",
|
|
27
34
|
"myValue": "setup-ref",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
35
|
+
"searchValue": "setup-ref",
|
|
36
|
+
"customOptions": "setup-ref",
|
|
37
|
+
"isEmpty": "setup-const",
|
|
38
|
+
"normalizeText": "setup-const",
|
|
39
|
+
"isOptionMatched": "setup-const",
|
|
40
|
+
"isOptionContainsKeyword": "setup-const",
|
|
41
|
+
"componentProps": "setup-ref",
|
|
42
|
+
"mergedOptions": "setup-ref",
|
|
43
|
+
"displayOptions": "setup-ref",
|
|
44
|
+
"appendCustomOption": "setup-const",
|
|
31
45
|
"handleSearch": "setup-const",
|
|
32
|
-
"
|
|
46
|
+
"resetSearchValue": "setup-const",
|
|
47
|
+
"handleMultipleChange": "setup-const",
|
|
48
|
+
"handleSingleChange": "setup-const",
|
|
49
|
+
"handleSingleBlur": "setup-const",
|
|
50
|
+
"onSelect": "setup-const",
|
|
51
|
+
"normalizeValueByMode": "setup-const"
|
|
33
52
|
} */
|
|
34
53
|
import { defineComponent as _defineComponent } from 'vue';
|
|
35
|
-
import { unref as _unref, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock } from "vue";
|
|
36
|
-
import { Select } from 'ant-design-vue';
|
|
54
|
+
import { unref as _unref, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, } from "vue";
|
|
55
|
+
import { AutoComplete, Select } from 'ant-design-vue';
|
|
37
56
|
import { selectProps } from 'ant-design-vue/lib/select';
|
|
38
57
|
import { ref, watch, computed, } from 'vue';
|
|
39
58
|
const __sfc_main__ = _defineComponent({
|
|
@@ -56,52 +75,153 @@ const __sfc_main__ = _defineComponent({
|
|
|
56
75
|
const props = __props;
|
|
57
76
|
const emit = __emit;
|
|
58
77
|
const myValue = ref();
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
78
|
+
const searchValue = ref('');
|
|
79
|
+
const customOptions = ref([]);
|
|
80
|
+
const isEmpty = (val) => val === undefined || val === null || val === '';
|
|
81
|
+
const normalizeText = (val) => {
|
|
82
|
+
if (isEmpty(val)) {
|
|
83
|
+
return '';
|
|
64
84
|
}
|
|
85
|
+
if (typeof val === 'object' && val !== null && 'value' in val) {
|
|
86
|
+
return String(_nullishCoalesce(val.value, () => (''))).trim();
|
|
87
|
+
}
|
|
88
|
+
return String(val).trim();
|
|
89
|
+
};
|
|
90
|
+
const isOptionMatched = (option, keyword) => {
|
|
91
|
+
const optionValue = normalizeText(_optionalChain([option, 'optionalAccess', _ => _.value]));
|
|
92
|
+
const optionLabel = normalizeText(_nullishCoalesce(_optionalChain([option, 'optionalAccess', _2 => _2[props.searchKey]]), () => (_optionalChain([option, 'optionalAccess', _3 => _3.label]))));
|
|
93
|
+
return optionValue === keyword || optionLabel === keyword;
|
|
94
|
+
};
|
|
95
|
+
const isOptionContainsKeyword = (option, keyword) => {
|
|
96
|
+
const optionValue = normalizeText(_optionalChain([option, 'optionalAccess', _4 => _4.value]));
|
|
97
|
+
const optionLabel = normalizeText(_nullishCoalesce(_optionalChain([option, 'optionalAccess', _5 => _5[props.searchKey]]), () => (_optionalChain([option, 'optionalAccess', _6 => _6.label]))));
|
|
98
|
+
return optionValue.includes(keyword) || optionLabel.includes(keyword);
|
|
65
99
|
};
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
100
|
+
const componentProps = computed(() => {
|
|
101
|
+
const { multiple, searchKey, options, value, mode, ...rest } = props;
|
|
102
|
+
return rest;
|
|
103
|
+
});
|
|
104
|
+
const mergedOptions = computed(() => {
|
|
105
|
+
const baseOptions = Array.isArray(props.options)
|
|
106
|
+
? (props.options)
|
|
107
|
+
: [];
|
|
108
|
+
const result = [];
|
|
109
|
+
const keys = new Set();
|
|
110
|
+
[...customOptions.value, ...baseOptions].forEach((option) => {
|
|
111
|
+
const key = normalizeText(_optionalChain([option, 'optionalAccess', _7 => _7.value]) || _optionalChain([option, 'optionalAccess', _8 => _8[props.searchKey]]) || _optionalChain([option, 'optionalAccess', _9 => _9.label]));
|
|
112
|
+
if (!key || keys.has(key)) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
keys.add(key);
|
|
116
|
+
result.push(option);
|
|
117
|
+
});
|
|
118
|
+
return result;
|
|
119
|
+
});
|
|
120
|
+
const displayOptions = computed(() => {
|
|
121
|
+
const keyword = normalizeText(searchValue.value);
|
|
122
|
+
if (!keyword) {
|
|
123
|
+
return mergedOptions.value;
|
|
71
124
|
}
|
|
72
|
-
|
|
73
|
-
|
|
125
|
+
const matchedOptions = mergedOptions.value.filter((option) => isOptionContainsKeyword(option, keyword));
|
|
126
|
+
const exists = mergedOptions.value.some((option) => isOptionMatched(option, keyword));
|
|
127
|
+
if (exists) {
|
|
128
|
+
return matchedOptions;
|
|
129
|
+
}
|
|
130
|
+
return [{ label: keyword, value: keyword }, ...matchedOptions];
|
|
74
131
|
});
|
|
75
|
-
const
|
|
76
|
-
|
|
132
|
+
const appendCustomOption = (val) => {
|
|
133
|
+
const keyword = normalizeText(val);
|
|
134
|
+
if (!keyword) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
const exists = mergedOptions.value.some((option) => isOptionMatched(option, keyword));
|
|
138
|
+
if (exists) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
customOptions.value = [{ label: keyword, value: keyword }, ...customOptions.value];
|
|
142
|
+
};
|
|
143
|
+
const handleSearch = (val) => {
|
|
144
|
+
searchValue.value = normalizeText(val);
|
|
145
|
+
};
|
|
146
|
+
const resetSearchValue = () => {
|
|
147
|
+
searchValue.value = '';
|
|
148
|
+
};
|
|
149
|
+
const handleMultipleChange = (val) => {
|
|
150
|
+
const nextValue = Array.isArray(val)
|
|
151
|
+
? val
|
|
152
|
+
: isEmpty(val)
|
|
153
|
+
? []
|
|
154
|
+
: [val];
|
|
155
|
+
nextValue.forEach((item) => appendCustomOption(item));
|
|
156
|
+
myValue.value = nextValue;
|
|
157
|
+
resetSearchValue();
|
|
158
|
+
emit('update:value', nextValue);
|
|
159
|
+
emit('change', nextValue);
|
|
160
|
+
};
|
|
161
|
+
const handleSingleChange = (val) => {
|
|
162
|
+
const nextValue = isEmpty(val) ? undefined : val;
|
|
163
|
+
myValue.value = nextValue;
|
|
164
|
+
emit('update:value', nextValue);
|
|
165
|
+
emit('change', nextValue);
|
|
166
|
+
};
|
|
167
|
+
const handleSingleBlur = () => {
|
|
168
|
+
appendCustomOption(myValue.value);
|
|
169
|
+
resetSearchValue();
|
|
77
170
|
};
|
|
78
171
|
const onSelect = (val, option) => {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
172
|
+
appendCustomOption(val);
|
|
173
|
+
resetSearchValue();
|
|
174
|
+
emit('select', val, option);
|
|
175
|
+
};
|
|
176
|
+
const normalizeValueByMode = (val) => {
|
|
177
|
+
if (isEmpty(val)) {
|
|
178
|
+
return props.multiple ? [] : undefined;
|
|
179
|
+
}
|
|
180
|
+
if (props.multiple) {
|
|
181
|
+
return Array.isArray(val) ? val : [val];
|
|
84
182
|
}
|
|
85
|
-
|
|
86
|
-
emit('update:value', _val);
|
|
87
|
-
emit('select', _val, _option);
|
|
183
|
+
return Array.isArray(val) ? val[val.length - 1] : val;
|
|
88
184
|
};
|
|
89
|
-
watch(() => props.value, (val) => {
|
|
90
|
-
|
|
185
|
+
watch([() => props.value, () => props.multiple], ([val]) => {
|
|
186
|
+
const nextValue = normalizeValueByMode(val);
|
|
187
|
+
myValue.value = nextValue;
|
|
188
|
+
if (Array.isArray(nextValue)) {
|
|
189
|
+
nextValue.forEach((item) => appendCustomOption(item));
|
|
190
|
+
}
|
|
191
|
+
else {
|
|
192
|
+
if (!props.multiple &&
|
|
193
|
+
normalizeText(nextValue) === normalizeText(searchValue.value)) {
|
|
194
|
+
return;
|
|
195
|
+
}
|
|
196
|
+
appendCustomOption(nextValue);
|
|
197
|
+
}
|
|
91
198
|
}, { immediate: true });
|
|
92
199
|
return (_ctx, _cache) => {
|
|
93
|
-
return (
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
200
|
+
return (props.multiple)
|
|
201
|
+
? (_openBlock(), _createBlock(_unref(Select), _mergeProps({
|
|
202
|
+
key: 0,
|
|
203
|
+
value: myValue.value,
|
|
204
|
+
allowClear: ""
|
|
205
|
+
}, componentProps.value, {
|
|
206
|
+
mode: "tags",
|
|
207
|
+
options: displayOptions.value,
|
|
208
|
+
style: { "width": "100%" },
|
|
209
|
+
onSelect: onSelect,
|
|
210
|
+
onSearch: handleSearch,
|
|
211
|
+
onChange: handleMultipleChange
|
|
212
|
+
}), null, 16 /* FULL_PROPS */, ["value", "options"]))
|
|
213
|
+
: (_openBlock(), _createBlock(_unref(AutoComplete), _mergeProps({
|
|
214
|
+
key: 1,
|
|
215
|
+
value: myValue.value,
|
|
216
|
+
allowClear: ""
|
|
217
|
+
}, componentProps.value, {
|
|
218
|
+
options: displayOptions.value,
|
|
219
|
+
style: { "width": "100%" },
|
|
220
|
+
onSelect: onSelect,
|
|
221
|
+
onSearch: handleSearch,
|
|
222
|
+
onChange: handleSingleChange,
|
|
223
|
+
onBlur: handleSingleBlur
|
|
224
|
+
}), null, 16 /* FULL_PROPS */, ["value", "options"]));
|
|
105
225
|
};
|
|
106
226
|
}
|
|
107
227
|
});
|
|
@@ -218,6 +218,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
|
|
|
218
218
|
var collapsedButtonRender = (0, _util.getSlot)(slots, props, 'collapsedButtonRender');
|
|
219
219
|
var headerContentRender = (0, _util.getSlot)(slots, props, 'headerContentRender');
|
|
220
220
|
var rightContentRender = (0, _util.getSlot)(slots, props, 'rightContentRender');
|
|
221
|
+
var leftContentRender = (0, _util.getSlot)(slots, props, 'leftContentRender');
|
|
221
222
|
var customHeaderRender = (0, _util.getSlot)(slots, props, 'headerRender');
|
|
222
223
|
// menu
|
|
223
224
|
var menuHeaderRender = (0, _util.getSlot)(slots, props, 'menuHeaderRender');
|
|
@@ -240,6 +241,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
|
|
|
240
241
|
onSelect: onSelect,
|
|
241
242
|
onMenuHeaderClick: onMenuHeaderClick,
|
|
242
243
|
rightContentRender: rightContentRender,
|
|
244
|
+
leftContentRender: leftContentRender,
|
|
243
245
|
collapsedButtonRender: collapsedButtonRender,
|
|
244
246
|
headerTitleRender: menuHeaderRender,
|
|
245
247
|
menuExtraRender: menuExtraRender,
|
|
@@ -32,6 +32,12 @@ var headerViewProps = exports.headerViewProps = (0, _objectSpread2.default)((0,
|
|
|
32
32
|
return undefined;
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
|
+
leftContentRender: {
|
|
36
|
+
type: [Object, Function, Boolean],
|
|
37
|
+
default: function _default() {
|
|
38
|
+
return undefined;
|
|
39
|
+
}
|
|
40
|
+
},
|
|
35
41
|
hasSiderMenu: _vueTypes.default.looseBool,
|
|
36
42
|
siderWidth: _vueTypes.default.number.def(208)
|
|
37
43
|
});
|
|
@@ -62,6 +68,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
|
|
|
62
68
|
"theme": theme.value,
|
|
63
69
|
"mode": "horizontal"
|
|
64
70
|
}, props), {}, {
|
|
71
|
+
"leftContentRender": props.leftContentRender,
|
|
65
72
|
"onCollapse": onCollapse.value,
|
|
66
73
|
"menuData": context.menuData
|
|
67
74
|
}), null);
|
|
@@ -56,6 +56,12 @@ var baseHeaderProps = exports.baseHeaderProps = (0, _objectSpread2.default)((0,
|
|
|
56
56
|
return undefined;
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
|
+
leftContentRender: {
|
|
60
|
+
type: [Object, Function],
|
|
61
|
+
default: function _default() {
|
|
62
|
+
return undefined;
|
|
63
|
+
}
|
|
64
|
+
},
|
|
59
65
|
collapsedButtonRender: _SiderMenu.siderMenuProps.collapsedButtonRender,
|
|
60
66
|
matchMenuKeys: _SiderMenu.siderMenuProps.matchMenuKeys,
|
|
61
67
|
// events
|
|
@@ -96,6 +102,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
|
|
|
96
102
|
onOpenKeys = props.onOpenKeys,
|
|
97
103
|
onSelect = props.onSelect,
|
|
98
104
|
contentWidth = props.contentWidth,
|
|
105
|
+
leftContentRender = props.leftContentRender,
|
|
99
106
|
rightContentRender = props.rightContentRender,
|
|
100
107
|
topHeaderMenuRender = props.topHeaderMenuRender,
|
|
101
108
|
layout = props.layout,
|
|
@@ -152,7 +159,9 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
|
|
|
152
159
|
"class": "".concat(prefixCls, "-logo"),
|
|
153
160
|
"key": "logo",
|
|
154
161
|
"id": "logo"
|
|
155
|
-
}, [headerDom])]), (0, _vue.createVNode)("div", {
|
|
162
|
+
}, [headerDom])]), leftContentRender && (0, _vue.createVNode)("div", {
|
|
163
|
+
"class": "".concat(prefixCls, "-left-content")
|
|
164
|
+
}, [typeof leftContentRender === 'function' ? leftContentRender((0, _objectSpread2.default)({}, props)) : leftContentRender]), (0, _vue.createVNode)("div", {
|
|
156
165
|
"style": {
|
|
157
166
|
flex: 1
|
|
158
167
|
},
|
|
@@ -91,13 +91,17 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
|
|
|
91
91
|
}
|
|
92
92
|
}), '.anticon', {
|
|
93
93
|
color: 'inherit'
|
|
94
|
-
})), "".concat(topNavHeaderCls, "-main"), (0, _defineProperty2.default)({
|
|
94
|
+
})), "".concat(topNavHeaderCls, "-main"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
95
95
|
display: 'flex',
|
|
96
96
|
height: '100%',
|
|
97
97
|
paddingLeft: '16px'
|
|
98
98
|
}, "".concat(topNavHeaderCls, "-main-left"), {
|
|
99
99
|
display: 'flex',
|
|
100
100
|
minWidth: '192px'
|
|
101
|
+
}), "".concat(topNavHeaderCls, "-left-content"), {
|
|
102
|
+
display: 'flex',
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
marginInlineEnd: '16px'
|
|
101
105
|
})), '.anticon', {
|
|
102
106
|
color: '#fff'
|
|
103
107
|
}), "".concat(topNavHeaderCls, "-logo"), {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetlinks-web/components",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -154,8 +154,8 @@
|
|
|
154
154
|
"webpack-dev-server": "^4.0.0",
|
|
155
155
|
"webpack-merge": "^5.0.0",
|
|
156
156
|
"webpackbar": "^5.0.2",
|
|
157
|
-
"@jetlinks-web/hooks": "^1.1.1",
|
|
158
157
|
"@jetlinks-web/constants": "^1.0.9",
|
|
158
|
+
"@jetlinks-web/hooks": "^1.1.1",
|
|
159
159
|
"@jetlinks-web/utils": "^1.2.12"
|
|
160
160
|
},
|
|
161
161
|
"publishConfig": {
|