413 lines
15 KiB
JavaScript
413 lines
15 KiB
JavaScript
|
import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
|
||
|
|
// Styles
|
||
|
|
import "./VSelect.css";
|
||
|
|
|
||
|
|
// Components
|
||
|
|
import { VDialogTransition } from "../transitions/index.mjs";
|
||
|
|
import { VAvatar } from "../VAvatar/index.mjs";
|
||
|
|
import { VCheckboxBtn } from "../VCheckbox/index.mjs";
|
||
|
|
import { VChip } from "../VChip/index.mjs";
|
||
|
|
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
|
||
|
|
import { VIcon } from "../VIcon/index.mjs";
|
||
|
|
import { VList, VListItem } from "../VList/index.mjs";
|
||
|
|
import { VMenu } from "../VMenu/index.mjs";
|
||
|
|
import { makeVTextFieldProps, VTextField } from "../VTextField/VTextField.mjs";
|
||
|
|
import { VVirtualScroll } from "../VVirtualScroll/index.mjs"; // Composables
|
||
|
|
import { useScrolling } from "./useScrolling.mjs";
|
||
|
|
import { useForm } from "../../composables/form.mjs";
|
||
|
|
import { forwardRefs } from "../../composables/forwardRefs.mjs";
|
||
|
|
import { IconValue } from "../../composables/icons.mjs";
|
||
|
|
import { makeItemsProps, useItems } from "../../composables/list-items.mjs";
|
||
|
|
import { useLocale } from "../../composables/locale.mjs";
|
||
|
|
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
|
||
|
|
import { makeTransitionProps } from "../../composables/transition.mjs"; // Utilities
|
||
|
|
import { computed, mergeProps, ref, shallowRef, watch } from 'vue';
|
||
|
|
import { ensureValidVNode, genericComponent, IN_BROWSER, matchesSelector, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
|
||
|
|
export const makeSelectProps = propsFactory({
|
||
|
|
chips: Boolean,
|
||
|
|
closableChips: Boolean,
|
||
|
|
closeText: {
|
||
|
|
type: String,
|
||
|
|
default: '$vuetify.close'
|
||
|
|
},
|
||
|
|
openText: {
|
||
|
|
type: String,
|
||
|
|
default: '$vuetify.open'
|
||
|
|
},
|
||
|
|
eager: Boolean,
|
||
|
|
hideNoData: Boolean,
|
||
|
|
hideSelected: Boolean,
|
||
|
|
listProps: {
|
||
|
|
type: Object
|
||
|
|
},
|
||
|
|
menu: Boolean,
|
||
|
|
menuIcon: {
|
||
|
|
type: IconValue,
|
||
|
|
default: '$dropdown'
|
||
|
|
},
|
||
|
|
menuProps: {
|
||
|
|
type: Object
|
||
|
|
},
|
||
|
|
multiple: Boolean,
|
||
|
|
noDataText: {
|
||
|
|
type: String,
|
||
|
|
default: '$vuetify.noDataText'
|
||
|
|
},
|
||
|
|
openOnClear: Boolean,
|
||
|
|
itemColor: String,
|
||
|
|
...makeItemsProps({
|
||
|
|
itemChildren: false
|
||
|
|
})
|
||
|
|
}, 'Select');
|
||
|
|
export const makeVSelectProps = propsFactory({
|
||
|
|
...makeSelectProps(),
|
||
|
|
...omit(makeVTextFieldProps({
|
||
|
|
modelValue: null,
|
||
|
|
role: 'combobox'
|
||
|
|
}), ['validationValue', 'dirty', 'appendInnerIcon']),
|
||
|
|
...makeTransitionProps({
|
||
|
|
transition: {
|
||
|
|
component: VDialogTransition
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, 'VSelect');
|
||
|
|
export const VSelect = genericComponent()({
|
||
|
|
name: 'VSelect',
|
||
|
|
props: makeVSelectProps(),
|
||
|
|
emits: {
|
||
|
|
'update:focused': focused => true,
|
||
|
|
'update:modelValue': value => true,
|
||
|
|
'update:menu': ue => true
|
||
|
|
},
|
||
|
|
setup(props, _ref) {
|
||
|
|
let {
|
||
|
|
slots
|
||
|
|
} = _ref;
|
||
|
|
const {
|
||
|
|
t
|
||
|
|
} = useLocale();
|
||
|
|
const vTextFieldRef = ref();
|
||
|
|
const vMenuRef = ref();
|
||
|
|
const vVirtualScrollRef = ref();
|
||
|
|
const _menu = useProxiedModel(props, 'menu');
|
||
|
|
const menu = computed({
|
||
|
|
get: () => _menu.value,
|
||
|
|
set: v => {
|
||
|
|
if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
|
||
|
|
_menu.value = v;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const {
|
||
|
|
items,
|
||
|
|
transformIn,
|
||
|
|
transformOut
|
||
|
|
} = useItems(props);
|
||
|
|
const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
|
||
|
|
const transformed = transformOut(v);
|
||
|
|
return props.multiple ? transformed : transformed[0] ?? null;
|
||
|
|
});
|
||
|
|
const counterValue = computed(() => {
|
||
|
|
return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
|
||
|
|
});
|
||
|
|
const form = useForm();
|
||
|
|
const selectedValues = computed(() => model.value.map(selection => selection.value));
|
||
|
|
const isFocused = shallowRef(false);
|
||
|
|
const label = computed(() => menu.value ? props.closeText : props.openText);
|
||
|
|
let keyboardLookupPrefix = '';
|
||
|
|
let keyboardLookupLastTime;
|
||
|
|
const displayItems = computed(() => {
|
||
|
|
if (props.hideSelected) {
|
||
|
|
return items.value.filter(item => !model.value.some(s => s === item));
|
||
|
|
}
|
||
|
|
return items.value;
|
||
|
|
});
|
||
|
|
const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
|
||
|
|
const computedMenuProps = computed(() => {
|
||
|
|
return {
|
||
|
|
...props.menuProps,
|
||
|
|
activatorProps: {
|
||
|
|
...(props.menuProps?.activatorProps || {}),
|
||
|
|
'aria-haspopup': 'listbox' // Set aria-haspopup to 'listbox'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const listRef = ref();
|
||
|
|
const {
|
||
|
|
onListScroll,
|
||
|
|
onListKeydown
|
||
|
|
} = useScrolling(listRef, vTextFieldRef);
|
||
|
|
function onClear(e) {
|
||
|
|
if (props.openOnClear) {
|
||
|
|
menu.value = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onMousedownControl() {
|
||
|
|
if (menuDisabled.value) return;
|
||
|
|
menu.value = !menu.value;
|
||
|
|
}
|
||
|
|
function onKeydown(e) {
|
||
|
|
if (!e.key || props.readonly || form?.isReadonly.value) return;
|
||
|
|
if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
|
||
|
|
menu.value = true;
|
||
|
|
}
|
||
|
|
if (['Escape', 'Tab'].includes(e.key)) {
|
||
|
|
menu.value = false;
|
||
|
|
}
|
||
|
|
if (e.key === 'Home') {
|
||
|
|
listRef.value?.focus('first');
|
||
|
|
} else if (e.key === 'End') {
|
||
|
|
listRef.value?.focus('last');
|
||
|
|
}
|
||
|
|
|
||
|
|
// html select hotkeys
|
||
|
|
const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
|
||
|
|
|
||
|
|
function checkPrintable(e) {
|
||
|
|
const isPrintableChar = e.key.length === 1;
|
||
|
|
const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
|
||
|
|
return isPrintableChar && noModifier;
|
||
|
|
}
|
||
|
|
if (props.multiple || !checkPrintable(e)) return;
|
||
|
|
const now = performance.now();
|
||
|
|
if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
|
||
|
|
keyboardLookupPrefix = '';
|
||
|
|
}
|
||
|
|
keyboardLookupPrefix += e.key.toLowerCase();
|
||
|
|
keyboardLookupLastTime = now;
|
||
|
|
const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
|
||
|
|
if (item !== undefined) {
|
||
|
|
model.value = [item];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function select(item) {
|
||
|
|
if (props.multiple) {
|
||
|
|
const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
|
||
|
|
if (index === -1) {
|
||
|
|
model.value = [...model.value, item];
|
||
|
|
} else {
|
||
|
|
const value = [...model.value];
|
||
|
|
value.splice(index, 1);
|
||
|
|
model.value = value;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
model.value = [item];
|
||
|
|
menu.value = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onBlur(e) {
|
||
|
|
if (!listRef.value?.$el.contains(e.relatedTarget)) {
|
||
|
|
menu.value = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onAfterLeave() {
|
||
|
|
if (isFocused.value) {
|
||
|
|
vTextFieldRef.value?.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onFocusin(e) {
|
||
|
|
isFocused.value = true;
|
||
|
|
}
|
||
|
|
function onModelUpdate(v) {
|
||
|
|
if (v == null) model.value = [];else if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
|
||
|
|
const item = items.value.find(item => item.title === v);
|
||
|
|
if (item) {
|
||
|
|
select(item);
|
||
|
|
}
|
||
|
|
} else if (vTextFieldRef.value) {
|
||
|
|
vTextFieldRef.value.value = '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
watch(menu, () => {
|
||
|
|
if (!props.hideSelected && menu.value && model.value.length) {
|
||
|
|
const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
|
||
|
|
IN_BROWSER && window.requestAnimationFrame(() => {
|
||
|
|
index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
watch(displayItems, (val, oldVal) => {
|
||
|
|
if (!isFocused.value) return;
|
||
|
|
if (!val.length && props.hideNoData) {
|
||
|
|
menu.value = false;
|
||
|
|
}
|
||
|
|
if (!oldVal.length && val.length) {
|
||
|
|
menu.value = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
useRender(() => {
|
||
|
|
const hasChips = !!(props.chips || slots.chip);
|
||
|
|
const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
|
||
|
|
const isDirty = model.value.length > 0;
|
||
|
|
const textFieldProps = VTextField.filterProps(props);
|
||
|
|
const placeholder = isDirty || !isFocused.value && props.label && !props.persistentPlaceholder ? undefined : props.placeholder;
|
||
|
|
return _createVNode(VTextField, _mergeProps({
|
||
|
|
"ref": vTextFieldRef
|
||
|
|
}, textFieldProps, {
|
||
|
|
"modelValue": model.value.map(v => v.props.value).join(', '),
|
||
|
|
"onUpdate:modelValue": onModelUpdate,
|
||
|
|
"focused": isFocused.value,
|
||
|
|
"onUpdate:focused": $event => isFocused.value = $event,
|
||
|
|
"validationValue": model.externalValue,
|
||
|
|
"counterValue": counterValue.value,
|
||
|
|
"dirty": isDirty,
|
||
|
|
"class": ['v-select', {
|
||
|
|
'v-select--active-menu': menu.value,
|
||
|
|
'v-select--chips': !!props.chips,
|
||
|
|
[`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
|
||
|
|
'v-select--selected': model.value.length,
|
||
|
|
'v-select--selection-slot': !!slots.selection
|
||
|
|
}, props.class],
|
||
|
|
"style": props.style,
|
||
|
|
"inputmode": "none",
|
||
|
|
"placeholder": placeholder,
|
||
|
|
"onClick:clear": onClear,
|
||
|
|
"onMousedown:control": onMousedownControl,
|
||
|
|
"onBlur": onBlur,
|
||
|
|
"onKeydown": onKeydown,
|
||
|
|
"aria-label": t(label.value),
|
||
|
|
"title": t(label.value)
|
||
|
|
}), {
|
||
|
|
...slots,
|
||
|
|
default: () => _createVNode(_Fragment, null, [_createVNode(VMenu, _mergeProps({
|
||
|
|
"ref": vMenuRef,
|
||
|
|
"modelValue": menu.value,
|
||
|
|
"onUpdate:modelValue": $event => menu.value = $event,
|
||
|
|
"activator": "parent",
|
||
|
|
"contentClass": "v-select__content",
|
||
|
|
"disabled": menuDisabled.value,
|
||
|
|
"eager": props.eager,
|
||
|
|
"maxHeight": 310,
|
||
|
|
"openOnClick": false,
|
||
|
|
"closeOnContentClick": false,
|
||
|
|
"transition": props.transition,
|
||
|
|
"onAfterLeave": onAfterLeave
|
||
|
|
}, computedMenuProps.value), {
|
||
|
|
default: () => [hasList && _createVNode(VList, _mergeProps({
|
||
|
|
"ref": listRef,
|
||
|
|
"selected": selectedValues.value,
|
||
|
|
"selectStrategy": props.multiple ? 'independent' : 'single-independent',
|
||
|
|
"onMousedown": e => e.preventDefault(),
|
||
|
|
"onKeydown": onListKeydown,
|
||
|
|
"onFocusin": onFocusin,
|
||
|
|
"onScrollPassive": onListScroll,
|
||
|
|
"tabindex": "-1",
|
||
|
|
"aria-live": "polite",
|
||
|
|
"color": props.itemColor ?? props.color
|
||
|
|
}, props.listProps), {
|
||
|
|
default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
|
||
|
|
"title": t(props.noDataText)
|
||
|
|
}, null)), _createVNode(VVirtualScroll, {
|
||
|
|
"ref": vVirtualScrollRef,
|
||
|
|
"renderless": true,
|
||
|
|
"items": displayItems.value
|
||
|
|
}, {
|
||
|
|
default: _ref2 => {
|
||
|
|
let {
|
||
|
|
item,
|
||
|
|
index,
|
||
|
|
itemRef
|
||
|
|
} = _ref2;
|
||
|
|
const itemProps = mergeProps(item.props, {
|
||
|
|
ref: itemRef,
|
||
|
|
key: index,
|
||
|
|
onClick: () => select(item)
|
||
|
|
});
|
||
|
|
return slots.item?.({
|
||
|
|
item,
|
||
|
|
index,
|
||
|
|
props: itemProps
|
||
|
|
}) ?? _createVNode(VListItem, _mergeProps(itemProps, {
|
||
|
|
"role": "option"
|
||
|
|
}), {
|
||
|
|
prepend: _ref3 => {
|
||
|
|
let {
|
||
|
|
isSelected
|
||
|
|
} = _ref3;
|
||
|
|
return _createVNode(_Fragment, null, [props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
|
||
|
|
"key": item.value,
|
||
|
|
"modelValue": isSelected,
|
||
|
|
"ripple": false,
|
||
|
|
"tabindex": "-1"
|
||
|
|
}, null) : undefined, item.props.prependAvatar && _createVNode(VAvatar, {
|
||
|
|
"image": item.props.prependAvatar
|
||
|
|
}, null), item.props.prependIcon && _createVNode(VIcon, {
|
||
|
|
"icon": item.props.prependIcon
|
||
|
|
}, null)]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}), slots['append-item']?.()]
|
||
|
|
})]
|
||
|
|
}), model.value.map((item, index) => {
|
||
|
|
function onChipClose(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
select(item);
|
||
|
|
}
|
||
|
|
const slotProps = {
|
||
|
|
'onClick:close': onChipClose,
|
||
|
|
onMousedown(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
},
|
||
|
|
modelValue: true,
|
||
|
|
'onUpdate:modelValue': undefined
|
||
|
|
};
|
||
|
|
const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
|
||
|
|
const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
|
||
|
|
item,
|
||
|
|
index,
|
||
|
|
props: slotProps
|
||
|
|
}) : slots.selection({
|
||
|
|
item,
|
||
|
|
index
|
||
|
|
})) : undefined;
|
||
|
|
if (hasSlot && !slotContent) return undefined;
|
||
|
|
return _createVNode("div", {
|
||
|
|
"key": item.value,
|
||
|
|
"class": "v-select__selection"
|
||
|
|
}, [hasChips ? !slots.chip ? _createVNode(VChip, _mergeProps({
|
||
|
|
"key": "chip",
|
||
|
|
"closable": props.closableChips,
|
||
|
|
"size": "small",
|
||
|
|
"text": item.title,
|
||
|
|
"disabled": item.props.disabled
|
||
|
|
}, slotProps), null) : _createVNode(VDefaultsProvider, {
|
||
|
|
"key": "chip-defaults",
|
||
|
|
"defaults": {
|
||
|
|
VChip: {
|
||
|
|
closable: props.closableChips,
|
||
|
|
size: 'small',
|
||
|
|
text: item.title
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
default: () => [slotContent]
|
||
|
|
}) : slotContent ?? _createVNode("span", {
|
||
|
|
"class": "v-select__selection-text"
|
||
|
|
}, [item.title, props.multiple && index < model.value.length - 1 && _createVNode("span", {
|
||
|
|
"class": "v-select__selection-comma"
|
||
|
|
}, [_createTextVNode(",")])])]);
|
||
|
|
})]),
|
||
|
|
'append-inner': function () {
|
||
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
args[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
return _createVNode(_Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? _createVNode(VIcon, {
|
||
|
|
"class": "v-select__menu-icon",
|
||
|
|
"icon": props.menuIcon
|
||
|
|
}, null) : undefined]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return forwardRefs({
|
||
|
|
isFocused,
|
||
|
|
menu,
|
||
|
|
select
|
||
|
|
}, vTextFieldRef);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VSelect.mjs.map
|