niuma-ui 1.2.6 → 1.2.8
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/CHANGELOG.md +16 -0
- package/dist/components/RsAutoComplete.d.ts +39 -0
- package/dist/components/RsAutoComplete.impl.js +306 -0
- package/dist/components/RsAutoComplete.js +5 -0
- package/dist/components/RsCascader.css +81 -0
- package/dist/components/RsCascader.d.ts +34 -0
- package/dist/components/RsCascader.impl.js +138 -0
- package/dist/components/RsCascader.js +8 -0
- package/dist/components/RsMentions-1.css +29 -0
- package/dist/components/RsMentions.css +19 -0
- package/dist/components/RsMentions.d.ts +32 -0
- package/dist/components/RsMentions.impl.js +242 -0
- package/dist/components/RsMentions.js +10 -0
- package/dist/components/RsSelect.css +51 -36
- package/dist/components/RsSelect.d.ts +27 -7
- package/dist/components/RsSelect.impl.js +145 -30
- package/dist/components/RsSelect.js +1 -1
- package/dist/components/RsTabs.d.ts +1 -1
- package/dist/components/RsToaster.d.ts +1 -1
- package/dist/components/RsTree.d.ts +4 -4
- package/dist/components/RsTree.impl.js +1 -1
- package/dist/components/RsTreeSelect.css +60 -0
- package/dist/components/RsTreeSelect.d.ts +33 -0
- package/dist/components/RsTreeSelect.impl.js +145 -0
- package/dist/components/RsTreeSelect.js +8 -0
- package/dist/components/cascader-utils.d.ts +16 -0
- package/dist/components/cascader-utils.js +39 -0
- package/dist/components/mentions-utils.d.ts +46 -0
- package/dist/components/mentions-utils.js +128 -0
- package/dist/components/overlay-utils.d.ts +31 -0
- package/dist/components/overlay-utils.js +29 -1
- package/dist/components/select-utils.d.ts +15 -0
- package/dist/components/select-utils.js +37 -1
- package/dist/components/table/RsTableCellEditor.impl.js +7 -1
- package/dist/components/use-rs-select.d.ts +5 -2
- package/dist/components/use-rs-select.js +31 -19
- package/dist/composables/useRsTableShell.js +1 -1
- package/dist/index.d.ts +9 -3
- package/dist/index.js +6 -0
- package/dist/locale/messages.js +6 -0
- package/dist/styles.css +160 -0
- package/package.json +1 -1
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { RsComponentSize } from '../theme/types';
|
|
2
|
+
import { type RsMentionOption } from './mentions-utils';
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
options?: readonly RsMentionOption[];
|
|
5
|
+
prefix?: string | string[];
|
|
6
|
+
split?: string;
|
|
7
|
+
rows?: number;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
size?: RsComponentSize;
|
|
11
|
+
};
|
|
12
|
+
type __VLS_ModelProps = {
|
|
13
|
+
modelValue?: string;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
16
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
17
|
+
search: (query: string) => any;
|
|
18
|
+
select: (value: string) => any;
|
|
19
|
+
"update:modelValue": (value: string) => any;
|
|
20
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
|
+
onSearch?: ((query: string) => any) | undefined;
|
|
22
|
+
onSelect?: ((value: string) => any) | undefined;
|
|
23
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
24
|
+
}>, {
|
|
25
|
+
split: string;
|
|
26
|
+
disabled: boolean;
|
|
27
|
+
options: readonly RsMentionOption[];
|
|
28
|
+
prefix: string | string[];
|
|
29
|
+
rows: number;
|
|
30
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
declare const _default: typeof __VLS_export;
|
|
32
|
+
export default _default;
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import { useRsI18n } from "../composables/useRsI18n.js";
|
|
2
|
+
import { useResolvedRsComponentSize } from "./resolve-size.js";
|
|
3
|
+
import { applyMention, createTextareaCaretMeter, filterMentionOptions, findActiveMention, placeMentionPopup, resolveMentionPrefixes, stepMentionIndex } from "./mentions-utils.js";
|
|
4
|
+
import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, vModelText, watch, withDirectives, withModifiers } from "vue";
|
|
5
|
+
//#region src/components/RsMentions.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var _hoisted_1 = [
|
|
7
|
+
"rows",
|
|
8
|
+
"placeholder",
|
|
9
|
+
"disabled",
|
|
10
|
+
"aria-expanded",
|
|
11
|
+
"aria-controls",
|
|
12
|
+
"aria-activedescendant"
|
|
13
|
+
];
|
|
14
|
+
var _hoisted_2 = ["id", "aria-label"];
|
|
15
|
+
var _hoisted_3 = [
|
|
16
|
+
"id",
|
|
17
|
+
"aria-selected",
|
|
18
|
+
"aria-disabled",
|
|
19
|
+
"onMousedown"
|
|
20
|
+
];
|
|
21
|
+
var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
22
|
+
name: "RsMentions",
|
|
23
|
+
__name: "RsMentions",
|
|
24
|
+
props: /*@__PURE__*/ mergeModels({
|
|
25
|
+
options: { default: () => [] },
|
|
26
|
+
prefix: { default: "@" },
|
|
27
|
+
split: { default: " " },
|
|
28
|
+
rows: { default: 3 },
|
|
29
|
+
placeholder: {},
|
|
30
|
+
disabled: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false
|
|
33
|
+
},
|
|
34
|
+
size: {}
|
|
35
|
+
}, {
|
|
36
|
+
"modelValue": { default: "" },
|
|
37
|
+
"modelModifiers": {}
|
|
38
|
+
}),
|
|
39
|
+
emits: /*@__PURE__*/ mergeModels(["select", "search"], ["update:modelValue"]),
|
|
40
|
+
setup(__props, { emit: __emit }) {
|
|
41
|
+
const model = useModel(__props, "modelValue");
|
|
42
|
+
const props = __props;
|
|
43
|
+
const emit = __emit;
|
|
44
|
+
const { t } = useRsI18n();
|
|
45
|
+
const resolvedSize = useResolvedRsComponentSize(() => props.size);
|
|
46
|
+
const listId = useId();
|
|
47
|
+
const areaRef = ref(null);
|
|
48
|
+
const listRef = ref(null);
|
|
49
|
+
const cursor = ref(0);
|
|
50
|
+
const popup = ref({
|
|
51
|
+
top: 0,
|
|
52
|
+
left: 0,
|
|
53
|
+
placement: "bottom"
|
|
54
|
+
});
|
|
55
|
+
const highlight = ref(0);
|
|
56
|
+
const dismissed = ref(false);
|
|
57
|
+
const lastSearch = ref(null);
|
|
58
|
+
const prefixes = computed(() => resolveMentionPrefixes(props.prefix));
|
|
59
|
+
const meter = createTextareaCaretMeter();
|
|
60
|
+
const active = computed(() => dismissed.value ? null : findActiveMention(model.value, cursor.value, prefixes.value, props.split));
|
|
61
|
+
const suggestions = computed(() => active.value ? filterMentionOptions(props.options, active.value.query) : []);
|
|
62
|
+
const open = computed(() => Boolean(active.value && suggestions.value.length));
|
|
63
|
+
const activeOption = computed(() => suggestions.value[highlight.value]);
|
|
64
|
+
const activeOptionId = computed(() => open.value && activeOption.value ? `${listId}-${activeOption.value.value}` : void 0);
|
|
65
|
+
function viewportCaret() {
|
|
66
|
+
const el = areaRef.value;
|
|
67
|
+
const mention = active.value;
|
|
68
|
+
if (!el || !mention) return null;
|
|
69
|
+
const local = meter.measure(el, mention.start);
|
|
70
|
+
const box = el.getBoundingClientRect();
|
|
71
|
+
return {
|
|
72
|
+
top: box.top + local.top,
|
|
73
|
+
left: box.left + local.left,
|
|
74
|
+
height: local.height
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
function placePopup() {
|
|
78
|
+
const caret = viewportCaret();
|
|
79
|
+
if (!caret) return;
|
|
80
|
+
const list = listRef.value?.getBoundingClientRect();
|
|
81
|
+
popup.value = placeMentionPopup(caret, {
|
|
82
|
+
width: list?.width || 160,
|
|
83
|
+
height: list?.height || Math.min(192, suggestions.value.length * 32)
|
|
84
|
+
}, {
|
|
85
|
+
width: window.innerWidth,
|
|
86
|
+
height: window.innerHeight
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
let frame = 0;
|
|
90
|
+
function requestPlace() {
|
|
91
|
+
if (frame) return;
|
|
92
|
+
frame = window.requestAnimationFrame(() => {
|
|
93
|
+
frame = 0;
|
|
94
|
+
placePopup();
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
function syncCursor(emitSearch, keepDismissed = false) {
|
|
98
|
+
const el = areaRef.value;
|
|
99
|
+
cursor.value = el?.selectionStart ?? model.value.length;
|
|
100
|
+
if (!keepDismissed) dismissed.value = false;
|
|
101
|
+
const mention = findActiveMention(model.value, cursor.value, prefixes.value, props.split);
|
|
102
|
+
if (!mention) {
|
|
103
|
+
lastSearch.value = null;
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
if (emitSearch && mention.query !== lastSearch.value) {
|
|
107
|
+
lastSearch.value = mention.query;
|
|
108
|
+
emit("search", mention.query);
|
|
109
|
+
}
|
|
110
|
+
requestPlace();
|
|
111
|
+
}
|
|
112
|
+
function pick(option) {
|
|
113
|
+
if (!active.value || option.disabled) return;
|
|
114
|
+
const next = applyMention(model.value, active.value, option.value, props.split);
|
|
115
|
+
model.value = next.text;
|
|
116
|
+
emit("select", option.value);
|
|
117
|
+
dismissed.value = true;
|
|
118
|
+
nextTick(() => {
|
|
119
|
+
const el = areaRef.value;
|
|
120
|
+
if (!el) return;
|
|
121
|
+
el.focus();
|
|
122
|
+
el.setSelectionRange(next.cursor, next.cursor);
|
|
123
|
+
cursor.value = next.cursor;
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function onKeydown(event) {
|
|
127
|
+
if (!open.value) return;
|
|
128
|
+
if (event.key === "ArrowDown") {
|
|
129
|
+
event.preventDefault();
|
|
130
|
+
highlight.value = stepMentionIndex(suggestions.value, highlight.value, 1);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (event.key === "ArrowUp") {
|
|
134
|
+
event.preventDefault();
|
|
135
|
+
highlight.value = stepMentionIndex(suggestions.value, highlight.value, -1);
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
if (event.key === "Enter") {
|
|
139
|
+
event.preventDefault();
|
|
140
|
+
if (activeOption.value) pick(activeOption.value);
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
if (event.key === "Escape") {
|
|
144
|
+
event.preventDefault();
|
|
145
|
+
dismissed.value = true;
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
if (event.key === "Home") {
|
|
149
|
+
event.preventDefault();
|
|
150
|
+
highlight.value = stepMentionIndex(suggestions.value, -1, 1);
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
if (event.key === "End") {
|
|
154
|
+
event.preventDefault();
|
|
155
|
+
highlight.value = stepMentionIndex(suggestions.value, suggestions.value.length, -1);
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
if (event.key === "Tab" && activeOption.value) {
|
|
159
|
+
event.preventDefault();
|
|
160
|
+
pick(activeOption.value);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
watch(suggestions, (list) => {
|
|
164
|
+
highlight.value = list.findIndex((item) => !item.disabled);
|
|
165
|
+
if (highlight.value < 0) highlight.value = 0;
|
|
166
|
+
requestPlace();
|
|
167
|
+
});
|
|
168
|
+
watch(open, (isOpen) => {
|
|
169
|
+
if (isOpen) nextTick(() => requestPlace());
|
|
170
|
+
});
|
|
171
|
+
function onWindowChange() {
|
|
172
|
+
if (open.value) requestPlace();
|
|
173
|
+
}
|
|
174
|
+
onMounted(() => {
|
|
175
|
+
window.addEventListener("resize", onWindowChange);
|
|
176
|
+
window.addEventListener("scroll", onWindowChange, true);
|
|
177
|
+
});
|
|
178
|
+
onUnmounted(() => {
|
|
179
|
+
if (frame) window.cancelAnimationFrame(frame);
|
|
180
|
+
meter.dispose();
|
|
181
|
+
window.removeEventListener("resize", onWindowChange);
|
|
182
|
+
window.removeEventListener("scroll", onWindowChange, true);
|
|
183
|
+
});
|
|
184
|
+
return (_ctx, _cache) => {
|
|
185
|
+
return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-mentions", `rs-mentions--${unref(resolvedSize)}`]) }, [withDirectives(createElementVNode("textarea", {
|
|
186
|
+
ref_key: "areaRef",
|
|
187
|
+
ref: areaRef,
|
|
188
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
|
|
189
|
+
class: "rs-mentions__input",
|
|
190
|
+
rows: __props.rows,
|
|
191
|
+
placeholder: __props.placeholder ?? unref(t)("mentions.placeholder"),
|
|
192
|
+
disabled: __props.disabled,
|
|
193
|
+
role: "combobox",
|
|
194
|
+
"aria-autocomplete": "list",
|
|
195
|
+
"aria-haspopup": "listbox",
|
|
196
|
+
"aria-expanded": open.value ? "true" : "false",
|
|
197
|
+
"aria-controls": open.value ? unref(listId) : void 0,
|
|
198
|
+
"aria-activedescendant": activeOptionId.value,
|
|
199
|
+
onKeydown,
|
|
200
|
+
onKeyup: _cache[1] || (_cache[1] = ($event) => syncCursor(true, [
|
|
201
|
+
"Escape",
|
|
202
|
+
"Enter",
|
|
203
|
+
"Tab",
|
|
204
|
+
"ArrowUp",
|
|
205
|
+
"ArrowDown",
|
|
206
|
+
"Home",
|
|
207
|
+
"End"
|
|
208
|
+
].includes($event.key))),
|
|
209
|
+
onClick: _cache[2] || (_cache[2] = ($event) => syncCursor(true)),
|
|
210
|
+
onInput: _cache[3] || (_cache[3] = ($event) => syncCursor(true)),
|
|
211
|
+
onScroll: _cache[4] || (_cache[4] = ($event) => syncCursor(false, true))
|
|
212
|
+
}, null, 40, _hoisted_1), [[vModelText, model.value]]), (openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("ul", {
|
|
213
|
+
key: 0,
|
|
214
|
+
id: unref(listId),
|
|
215
|
+
ref_key: "listRef",
|
|
216
|
+
ref: listRef,
|
|
217
|
+
class: "rs-mentions__list",
|
|
218
|
+
role: "listbox",
|
|
219
|
+
"aria-label": unref(t)("mentions.suggestions"),
|
|
220
|
+
style: normalizeStyle({
|
|
221
|
+
top: `${popup.value.top}px`,
|
|
222
|
+
left: `${popup.value.left}px`
|
|
223
|
+
})
|
|
224
|
+
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(suggestions.value, (opt, index) => {
|
|
225
|
+
return openBlock(), createElementBlock("li", {
|
|
226
|
+
id: `${unref(listId)}-${opt.value}`,
|
|
227
|
+
key: opt.value,
|
|
228
|
+
role: "option",
|
|
229
|
+
class: normalizeClass(["rs-mentions__item", {
|
|
230
|
+
"rs-mentions__item--disabled": opt.disabled,
|
|
231
|
+
"rs-mentions__item--active": index === highlight.value
|
|
232
|
+
}]),
|
|
233
|
+
"aria-selected": index === highlight.value,
|
|
234
|
+
"aria-disabled": opt.disabled ? "true" : void 0,
|
|
235
|
+
onMousedown: withModifiers(($event) => pick(opt), ["prevent"])
|
|
236
|
+
}, toDisplayString(opt.label), 43, _hoisted_3);
|
|
237
|
+
}), 128))], 12, _hoisted_2)) : createCommentVNode("", true)]))], 2);
|
|
238
|
+
};
|
|
239
|
+
}
|
|
240
|
+
});
|
|
241
|
+
//#endregion
|
|
242
|
+
export { RsMentions_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import './RsMentions.css'
|
|
2
|
+
import './RsMentions-1.css'
|
|
3
|
+
import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
+
import RsMentions_vue_vue_type_script_setup_true_lang_default from "./RsMentions.impl.js";
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
//#region src/components/RsMentions.vue
|
|
8
|
+
var RsMentions_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsMentions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0ab8420e"]]);
|
|
9
|
+
//#endregion
|
|
10
|
+
export { RsMentions_default as default };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
|
-
.rs-select[data-v-
|
|
2
|
+
.rs-select[data-v-956c54dc] {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
width: 100%;
|
|
5
5
|
max-width: 100%;
|
|
6
6
|
vertical-align: middle;
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
}
|
|
9
|
-
.rs-select__trigger[data-v-
|
|
9
|
+
.rs-select__trigger[data-v-956c54dc] {
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
justify-content: space-between;
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
box-shadow var(--rs-transition-fast),
|
|
32
32
|
background var(--rs-transition-fast);
|
|
33
33
|
}
|
|
34
|
-
.rs-select--multiple .rs-select__trigger[data-v-
|
|
34
|
+
.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
|
|
35
35
|
min-height: var(--rs-control-height-md);
|
|
36
36
|
height: auto;
|
|
37
37
|
padding-top: var(--rs-space-xs);
|
|
38
38
|
padding-bottom: var(--rs-space-xs);
|
|
39
39
|
}
|
|
40
|
-
.rs-select--block[data-v-
|
|
40
|
+
.rs-select--block[data-v-956c54dc] {
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: column;
|
|
43
43
|
width: 100%;
|
|
@@ -46,41 +46,56 @@
|
|
|
46
46
|
align-self: stretch;
|
|
47
47
|
box-sizing: border-box;
|
|
48
48
|
}
|
|
49
|
-
.rs-select--block .rs-select__anchor[data-v-
|
|
50
|
-
.rs-select--block .rs-select__trigger[data-v-
|
|
49
|
+
.rs-select--block .rs-select__anchor[data-v-956c54dc],
|
|
50
|
+
.rs-select--block .rs-select__trigger[data-v-956c54dc] {
|
|
51
51
|
width: 100%;
|
|
52
52
|
}
|
|
53
|
-
.rs-select--ssm .rs-select__trigger[data-v-
|
|
53
|
+
.rs-select--ssm .rs-select__trigger[data-v-956c54dc] {
|
|
54
54
|
height: var(--rs-control-height-ssm);
|
|
55
55
|
min-height: var(--rs-control-height-ssm);
|
|
56
56
|
padding: 0 var(--rs-space-xs);
|
|
57
57
|
font-size: var(--rs-font-size-xs);
|
|
58
58
|
}
|
|
59
|
-
.rs-select--ssm.rs-select--multiple .rs-select__trigger[data-v-
|
|
59
|
+
.rs-select--ssm.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
|
|
60
60
|
min-height: var(--rs-control-height-ssm);
|
|
61
61
|
}
|
|
62
|
-
.rs-select--sm .rs-select__trigger[data-v-
|
|
62
|
+
.rs-select--sm .rs-select__trigger[data-v-956c54dc] {
|
|
63
63
|
height: var(--rs-control-height-sm);
|
|
64
64
|
min-height: var(--rs-control-height-sm);
|
|
65
65
|
padding: 0 var(--rs-space-sm);
|
|
66
66
|
font-size: var(--rs-font-size-xs);
|
|
67
67
|
}
|
|
68
|
-
.rs-select--sm.rs-select--multiple .rs-select__trigger[data-v-
|
|
68
|
+
.rs-select--sm.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
|
|
69
69
|
min-height: var(--rs-control-height-sm);
|
|
70
70
|
}
|
|
71
|
-
.rs-select--lg .rs-select__trigger[data-v-
|
|
71
|
+
.rs-select--lg .rs-select__trigger[data-v-956c54dc] {
|
|
72
72
|
height: var(--rs-control-height-lg);
|
|
73
73
|
min-height: var(--rs-control-height-lg);
|
|
74
74
|
padding: 0 var(--rs-space-lg);
|
|
75
75
|
font-size: var(--rs-font-size-base);
|
|
76
76
|
}
|
|
77
|
-
.rs-select--lg.rs-select--multiple .rs-select__trigger[data-v-
|
|
77
|
+
.rs-select--lg.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
|
|
78
78
|
min-height: var(--rs-control-height-lg);
|
|
79
79
|
}
|
|
80
|
-
.rs-select__trigger[data-v-
|
|
80
|
+
.rs-select--filled .rs-select__trigger[data-v-956c54dc] {
|
|
81
|
+
border-color: transparent;
|
|
82
|
+
background: var(--rs-surface-hover);
|
|
83
|
+
}
|
|
84
|
+
.rs-select--borderless .rs-select__trigger[data-v-956c54dc] {
|
|
85
|
+
border-color: transparent;
|
|
86
|
+
background: transparent;
|
|
87
|
+
box-shadow: none;
|
|
88
|
+
}
|
|
89
|
+
.rs-select__mark[data-v-956c54dc] {
|
|
90
|
+
padding: 0;
|
|
91
|
+
background: color-mix(in srgb, var(--rs-primary) 22%, transparent);
|
|
92
|
+
color: inherit;
|
|
93
|
+
font-weight: var(--rs-font-weight-medium);
|
|
94
|
+
}
|
|
95
|
+
.rs-select__trigger[data-v-956c54dc]:hover:not([data-disabled]) {
|
|
81
96
|
border-color: var(--rs-input-border-hover, var(--rs-border));
|
|
82
97
|
}
|
|
83
|
-
.rs-select__trigger[data-v-
|
|
98
|
+
.rs-select__trigger[data-v-956c54dc]:focus-visible {
|
|
84
99
|
outline: none;
|
|
85
100
|
border-color: var(--rs-focus-border, var(--rs-primary));
|
|
86
101
|
background: var(--rs-input-bg);
|
|
@@ -88,32 +103,32 @@
|
|
|
88
103
|
var(--rs-input-shadow, none),
|
|
89
104
|
0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
|
|
90
105
|
}
|
|
91
|
-
.rs-select__trigger[data-disabled][data-v-
|
|
106
|
+
.rs-select__trigger[data-disabled][data-v-956c54dc] {
|
|
92
107
|
opacity: 0.38;
|
|
93
108
|
cursor: not-allowed;
|
|
94
109
|
background: var(--rs-surface-hover);
|
|
95
110
|
}
|
|
96
|
-
.rs-select__trigger--invalid[data-v-
|
|
111
|
+
.rs-select__trigger--invalid[data-v-956c54dc] {
|
|
97
112
|
border-color: var(--rs-danger);
|
|
98
113
|
}
|
|
99
|
-
.rs-select__trigger--invalid[data-v-
|
|
114
|
+
.rs-select__trigger--invalid[data-v-956c54dc]:focus-visible {
|
|
100
115
|
border-color: var(--rs-danger);
|
|
101
116
|
box-shadow:
|
|
102
117
|
var(--rs-input-shadow, none),
|
|
103
118
|
0 0 0 var(--rs-focus-ring-width, 2px)
|
|
104
119
|
color-mix(in srgb, var(--rs-danger) 14%, transparent);
|
|
105
120
|
}
|
|
106
|
-
.rs-select__trigger--warning[data-v-
|
|
121
|
+
.rs-select__trigger--warning[data-v-956c54dc] {
|
|
107
122
|
border-color: var(--rs-warning, #d97706);
|
|
108
123
|
}
|
|
109
|
-
.rs-select__trigger--warning[data-v-
|
|
124
|
+
.rs-select__trigger--warning[data-v-956c54dc]:focus-visible {
|
|
110
125
|
border-color: var(--rs-warning, #d97706);
|
|
111
126
|
box-shadow:
|
|
112
127
|
var(--rs-input-shadow, none),
|
|
113
128
|
0 0 0 var(--rs-focus-ring-width, 2px)
|
|
114
129
|
color-mix(in srgb, var(--rs-warning, #d97706) 14%, transparent);
|
|
115
130
|
}
|
|
116
|
-
.rs-select__value[data-v-
|
|
131
|
+
.rs-select__value[data-v-956c54dc] {
|
|
117
132
|
flex: 1;
|
|
118
133
|
min-width: 0;
|
|
119
134
|
text-align: left;
|
|
@@ -121,7 +136,7 @@
|
|
|
121
136
|
text-overflow: ellipsis;
|
|
122
137
|
white-space: nowrap;
|
|
123
138
|
}
|
|
124
|
-
.rs-select__value--multiple[data-v-
|
|
139
|
+
.rs-select__value--multiple[data-v-956c54dc] {
|
|
125
140
|
display: flex;
|
|
126
141
|
flex-wrap: nowrap;
|
|
127
142
|
gap: var(--rs-space-xs);
|
|
@@ -129,28 +144,28 @@
|
|
|
129
144
|
white-space: nowrap;
|
|
130
145
|
overflow: hidden;
|
|
131
146
|
}
|
|
132
|
-
.rs-select__prefix[data-v-
|
|
147
|
+
.rs-select__prefix[data-v-956c54dc] {
|
|
133
148
|
display: inline-flex;
|
|
134
149
|
flex-shrink: 0;
|
|
135
150
|
align-items: center;
|
|
136
151
|
color: var(--rs-muted);
|
|
137
152
|
}
|
|
138
|
-
.rs-select__tag--rest[data-v-
|
|
153
|
+
.rs-select__tag--rest[data-v-956c54dc] {
|
|
139
154
|
padding-right: 0.5rem;
|
|
140
155
|
color: var(--rs-muted);
|
|
141
156
|
background: var(--rs-surface-hover);
|
|
142
157
|
border-color: var(--rs-border);
|
|
143
158
|
}
|
|
144
|
-
.rs-select__placeholder[data-v-
|
|
159
|
+
.rs-select__placeholder[data-v-956c54dc] {
|
|
145
160
|
color: var(--rs-placeholder);
|
|
146
161
|
}
|
|
147
|
-
.rs-select__single-label[data-v-
|
|
162
|
+
.rs-select__single-label[data-v-956c54dc] {
|
|
148
163
|
display: block;
|
|
149
164
|
overflow: hidden;
|
|
150
165
|
text-overflow: ellipsis;
|
|
151
166
|
white-space: nowrap;
|
|
152
167
|
}
|
|
153
|
-
.rs-select__tag[data-v-
|
|
168
|
+
.rs-select__tag[data-v-956c54dc] {
|
|
154
169
|
display: inline-flex;
|
|
155
170
|
align-items: center;
|
|
156
171
|
gap: 0.125rem;
|
|
@@ -164,12 +179,12 @@
|
|
|
164
179
|
font-size: var(--rs-font-size-xs);
|
|
165
180
|
line-height: var(--rs-line-height-tight);
|
|
166
181
|
}
|
|
167
|
-
.rs-select__tag-label[data-v-
|
|
182
|
+
.rs-select__tag-label[data-v-956c54dc] {
|
|
168
183
|
overflow: hidden;
|
|
169
184
|
text-overflow: ellipsis;
|
|
170
185
|
white-space: nowrap;
|
|
171
186
|
}
|
|
172
|
-
.rs-select__tag-remove[data-v-
|
|
187
|
+
.rs-select__tag-remove[data-v-956c54dc] {
|
|
173
188
|
display: inline-flex;
|
|
174
189
|
align-items: center;
|
|
175
190
|
justify-content: center;
|
|
@@ -185,17 +200,17 @@
|
|
|
185
200
|
color var(--rs-transition-fast),
|
|
186
201
|
background var(--rs-transition-fast);
|
|
187
202
|
}
|
|
188
|
-
.rs-select__tag-remove[data-v-
|
|
203
|
+
.rs-select__tag-remove[data-v-956c54dc]:hover {
|
|
189
204
|
color: var(--rs-on-primary-container);
|
|
190
205
|
background: color-mix(in srgb, var(--rs-primary) 16%, transparent);
|
|
191
206
|
}
|
|
192
|
-
.rs-select__actions[data-v-
|
|
207
|
+
.rs-select__actions[data-v-956c54dc] {
|
|
193
208
|
display: inline-flex;
|
|
194
209
|
align-items: center;
|
|
195
210
|
gap: var(--rs-space-xs);
|
|
196
211
|
flex-shrink: 0;
|
|
197
212
|
}
|
|
198
|
-
.rs-select__clear[data-v-
|
|
213
|
+
.rs-select__clear[data-v-956c54dc] {
|
|
199
214
|
display: inline-flex;
|
|
200
215
|
align-items: center;
|
|
201
216
|
justify-content: center;
|
|
@@ -211,23 +226,23 @@
|
|
|
211
226
|
color var(--rs-transition-fast),
|
|
212
227
|
background var(--rs-transition-fast);
|
|
213
228
|
}
|
|
214
|
-
.rs-select__clear[data-v-
|
|
229
|
+
.rs-select__clear[data-v-956c54dc]:hover {
|
|
215
230
|
color: var(--rs-text);
|
|
216
231
|
background: var(--rs-item-hover);
|
|
217
232
|
}
|
|
218
|
-
.rs-select__suffix[data-v-
|
|
233
|
+
.rs-select__suffix[data-v-956c54dc] {
|
|
219
234
|
display: inline-flex;
|
|
220
235
|
align-items: center;
|
|
221
236
|
}
|
|
222
|
-
.rs-select__icon[data-v-
|
|
237
|
+
.rs-select__icon[data-v-956c54dc] {
|
|
223
238
|
color: var(--rs-muted);
|
|
224
239
|
flex-shrink: 0;
|
|
225
240
|
transition: transform var(--rs-transition-fast);
|
|
226
241
|
}
|
|
227
|
-
.rs-select__trigger[data-state='open'] .rs-select__icon[data-v-
|
|
242
|
+
.rs-select__trigger[data-state='open'] .rs-select__icon[data-v-956c54dc] {
|
|
228
243
|
transform: rotate(180deg);
|
|
229
244
|
}
|
|
230
|
-
.rs-select__item--create .rs-select__item-label[data-v-
|
|
245
|
+
.rs-select__item--create .rs-select__item-label[data-v-956c54dc] {
|
|
231
246
|
color: var(--rs-primary);
|
|
232
247
|
font-weight: var(--rs-font-weight-medium);
|
|
233
248
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { RsComponentSize, RsRadius } from '../theme/types';
|
|
2
2
|
import { type RsFormRuleTrigger } from './form-rules';
|
|
3
|
-
import { type RsSelectFieldNames, type RsSelectFilterOption, type RsSelectFilterSort, type RsSelectGetPopupContainer, type RsSelectOption, type RsSelectOptionFilterProp, type RsSelectOptionsInput, type RsSelectPlacement, type
|
|
3
|
+
import { type RsSelectFieldNames, type RsSelectFilterOption, type RsSelectFilterSort, type RsSelectGetPopupContainer, type RsSelectMaxTagCount, type RsSelectModelValue, type RsSelectOption, type RsSelectOptionFilterProp, type RsSelectOptionsInput, type RsSelectPlacement, type RsSelectStatus, type RsSelectVariant, type RsSelectValue } from './select-utils';
|
|
4
4
|
declare const __VLS_export: <Value extends string | number = string, Multiple extends boolean = false, LabelInValue extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
5
5
|
props: import("vue").PublicProps & __VLS_PrettifyLocal<({
|
|
6
6
|
options: RsSelectOptionsInput;
|
|
@@ -13,7 +13,8 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
|
|
|
13
13
|
* 开启后若未显式关 searchable,将自动启用搜索框。
|
|
14
14
|
*/
|
|
15
15
|
creatable?: boolean;
|
|
16
|
-
multiple
|
|
16
|
+
/** 运行时必须是 boolean;写成泛型 Multiple 时 :multiple="true" 可能进 attrs,Combobox 会按单选。 */
|
|
17
|
+
multiple?: boolean;
|
|
17
18
|
required?: boolean;
|
|
18
19
|
name?: string;
|
|
19
20
|
clearable?: boolean;
|
|
@@ -39,10 +40,21 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
|
|
|
39
40
|
*/
|
|
40
41
|
filterOption?: RsSelectFilterOption | boolean;
|
|
41
42
|
optionFilterProp?: RsSelectOptionFilterProp;
|
|
42
|
-
maxTagCount?:
|
|
43
|
+
maxTagCount?: RsSelectMaxTagCount;
|
|
44
|
+
/** 远程 @search 防抖毫秒 */
|
|
45
|
+
debounce?: number;
|
|
46
|
+
/** 对齐 Ant 5;不影响面板内搜索 / 创建 */
|
|
47
|
+
variant?: RsSelectVariant;
|
|
48
|
+
autoFocus?: boolean;
|
|
49
|
+
dropdownStyle?: Record<string, string>;
|
|
50
|
+
classNames?: {
|
|
51
|
+
popup?: string;
|
|
52
|
+
trigger?: string;
|
|
53
|
+
};
|
|
43
54
|
maxTagPlaceholder?: string | ((omitted: number) => string);
|
|
44
55
|
multipleLimit?: number;
|
|
45
|
-
|
|
56
|
+
/** 与 multiple 相同:不能写成泛型 LabelInValue,否则 withDefaults 的 false 过不了 InferDefault。 */
|
|
57
|
+
labelInValue?: boolean;
|
|
46
58
|
filterSort?: RsSelectFilterSort;
|
|
47
59
|
maxTagTextLength?: number;
|
|
48
60
|
maxTagTooltip?: boolean;
|
|
@@ -65,16 +77,24 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
|
|
|
65
77
|
/** 下拉挂载容器,对齐 Ant getPopupContainer */
|
|
66
78
|
getPopupContainer?: RsSelectGetPopupContainer;
|
|
67
79
|
} & {
|
|
68
|
-
|
|
80
|
+
/**
|
|
81
|
+
* multiple / labelInValue 是运行时 boolean,不能从 prop 推断字面量。
|
|
82
|
+
* v-model 收完整联合,模板传入 string / number / 数组 / labeled 即可。
|
|
83
|
+
*/
|
|
84
|
+
modelValue?: RsSelectModelValue;
|
|
69
85
|
open?: boolean;
|
|
70
86
|
searchValue?: string;
|
|
71
87
|
}) & {
|
|
72
88
|
onSearch?: ((query: string) => any) | undefined;
|
|
73
89
|
onSelect?: ((value: RsSelectValue, option?: RsSelectOption | undefined) => any) | undefined;
|
|
90
|
+
onBlur?: ((event: FocusEvent) => any) | undefined;
|
|
91
|
+
onFocus?: ((event: FocusEvent) => any) | undefined;
|
|
74
92
|
onClear?: (() => any) | undefined;
|
|
75
|
-
"onUpdate:modelValue"?: ((value:
|
|
93
|
+
"onUpdate:modelValue"?: ((value: RsSelectModelValue) => any) | undefined;
|
|
76
94
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
77
95
|
onDeselect?: ((value: RsSelectValue, option?: RsSelectOption | undefined) => any) | undefined;
|
|
96
|
+
onDropdownVisibleChange?: ((open: boolean) => any) | undefined;
|
|
97
|
+
onPopupScroll?: ((event: Event) => any) | undefined;
|
|
78
98
|
"onUpdate:searchValue"?: ((value: string) => any) | undefined;
|
|
79
99
|
}> & (typeof globalThis extends {
|
|
80
100
|
__VLS_PROPS_FALLBACK: infer P;
|
|
@@ -135,7 +155,7 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
|
|
|
135
155
|
} & {
|
|
136
156
|
footer?: (props: {}) => any;
|
|
137
157
|
};
|
|
138
|
-
emit: (((evt: "search", query: string) => void) & ((evt: "select", value: RsSelectValue, option?: RsSelectOption | undefined) => void) & ((evt: "clear") => void) & ((evt: "deselect", value: RsSelectValue, option?: RsSelectOption | undefined) => void)) & (((event: "update:modelValue", value:
|
|
158
|
+
emit: (((evt: "search", query: string) => void) & ((evt: "select", value: RsSelectValue, option?: RsSelectOption | undefined) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "deselect", value: RsSelectValue, option?: RsSelectOption | undefined) => void) & ((evt: "dropdownVisibleChange", open: boolean) => void) & ((evt: "popupScroll", event: Event) => void)) & (((event: "update:modelValue", value: RsSelectModelValue) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:searchValue", value: string) => void));
|
|
139
159
|
}>) => import("vue").VNode & {
|
|
140
160
|
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
141
161
|
};
|