vuetify
Version:
Vue Material Component Framework
466 lines (460 loc) • 17 kB
JavaScript
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, createTextVNode as _createTextVNode } from "vue";
// Styles
import "./VSelect.css";
// Components
import { VDialogTransition } from "../transitions/index.js";
import { VAvatar } from "../VAvatar/index.js";
import { VCheckboxBtn } from "../VCheckbox/index.js";
import { VChip } from "../VChip/index.js";
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
import { VIcon } from "../VIcon/index.js";
import { VList, VListItem } from "../VList/index.js";
import { VMenu } from "../VMenu/index.js";
import { makeVTextFieldProps, VTextField } from "../VTextField/VTextField.js";
import { VVirtualScroll } from "../VVirtualScroll/index.js"; // Composables
import { useScrolling } from "./useScrolling.js";
import { useForm } from "../../composables/form.js";
import { forwardRefs } from "../../composables/forwardRefs.js";
import { IconValue } from "../../composables/icons.js";
import { makeItemsProps, useItems } from "../../composables/list-items.js";
import { useLocale } from "../../composables/locale.js";
import { useProxiedModel } from "../../composables/proxiedModel.js";
import { makeTransitionProps } from "../../composables/transition.js"; // Utilities
import { computed, mergeProps, nextTick, ref, shallowRef, toRef, watch } from 'vue';
import { checkPrintable, deepEqual, ensureValidVNode, genericComponent, IN_BROWSER, matchesSelector, omit, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // 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 {
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(props);
const selectedValues = computed(() => model.value.map(selection => selection.value));
const isFocused = shallowRef(false);
let keyboardLookupPrefix = '';
let keyboardLookupIndex = -1;
let keyboardLookupLastTime;
const displayItems = computed(() => {
if (props.hideSelected) {
return items.value.filter(item => !model.value.some(s => (props.valueComparator || deepEqual)(s, item)));
}
return items.value;
});
const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
const _menu = useProxiedModel(props, 'menu');
const menu = computed({
get: () => _menu.value,
set: v => {
if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
if (v && menuDisabled.value) return;
_menu.value = v;
}
});
const label = toRef(() => menu.value ? props.closeText : props.openText);
const computedMenuProps = computed(() => {
return {
...props.menuProps,
activatorProps: {
...(props.menuProps?.activatorProps || {}),
'aria-haspopup': 'listbox' // Set aria-haspopup to 'listbox'
}
};
});
const listRef = ref();
const listEvents = useScrolling(listRef, vTextFieldRef);
function onClear(e) {
if (props.openOnClear) {
menu.value = true;
}
}
function onMousedownControl() {
if (menuDisabled.value) return;
menu.value = !menu.value;
}
function onListKeydown(e) {
if (checkPrintable(e)) {
onKeydown(e);
}
}
function onKeydown(e) {
if (!e.key || 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
if (!checkPrintable(e)) return;
const now = performance.now();
if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
keyboardLookupPrefix = '';
keyboardLookupIndex = -1;
}
keyboardLookupPrefix += e.key.toLowerCase();
keyboardLookupLastTime = now;
const items = displayItems.value;
function findItem() {
let result = findItemBase();
if (result) return result;
if (keyboardLookupPrefix.at(-1) === keyboardLookupPrefix.at(-2)) {
// No matches but we have a repeated letter, try the next item with that prefix
keyboardLookupPrefix = keyboardLookupPrefix.slice(0, -1);
result = findItemBase();
if (result) return result;
}
// Still nothing, wrap around to the top
keyboardLookupIndex = -1;
result = findItemBase();
if (result) return result;
// Still nothing, try just the new letter
keyboardLookupPrefix = e.key.toLowerCase();
return findItemBase();
}
function findItemBase() {
for (let i = keyboardLookupIndex + 1; i < items.length; i++) {
const _item = items[i];
if (_item.title.toLowerCase().startsWith(keyboardLookupPrefix)) {
return [_item, i];
}
}
return undefined;
}
const result = findItem();
if (!result) return;
const [item, index] = result;
keyboardLookupIndex = index;
listRef.value?.focus(index);
if (!props.multiple) {
model.value = [item];
}
}
/** @param set - null means toggle */
function select(item) {
let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (item.props.disabled) return;
if (props.multiple) {
const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
const add = set == null ? !~index : set;
if (~index) {
const value = add ? [...model.value, item] : [...model.value];
value.splice(index, 1);
model.value = value;
} else if (add) {
model.value = [...model.value, item];
}
} else {
const add = set !== false;
model.value = add ? [item] : [];
nextTick(() => {
menu.value = false;
});
}
}
function onBlur(e) {
if (!listRef.value?.$el.contains(e.relatedTarget)) {
menu.value = false;
}
}
function onAfterEnter() {
if (props.eager) {
vVirtualScrollRef.value?.calculateVisibleItems();
}
}
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 || deepEqual)(s.value, item.value)));
IN_BROWSER && window.requestAnimationFrame(() => {
index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
});
}
});
watch(() => props.items, (newVal, oldVal) => {
if (menu.value) return;
if (isFocused.value && !oldVal.length && newVal.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: () => _createElementVNode(_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,
"onAfterEnter": onAfterEnter,
"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,
"tabindex": "-1",
"aria-live": "polite",
"aria-label": `${props.label}-list`,
"color": props.itemColor ?? props.color
}, listEvents, props.listProps), {
default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
"key": "no-data",
"title": t(props.noDataText)
}, null)), _createVNode(VVirtualScroll, {
"ref": vVirtualScrollRef,
"renderless": true,
"items": displayItems.value,
"itemKey": "value"
}, {
default: _ref2 => {
let {
item,
index,
itemRef
} = _ref2;
const itemProps = mergeProps(item.props, {
ref: itemRef,
key: item.value,
onClick: () => select(item, null)
});
return slots.item?.({
item,
index,
props: itemProps
}) ?? _createVNode(VListItem, _mergeProps(itemProps, {
"role": "option"
}), {
prepend: _ref3 => {
let {
isSelected
} = _ref3;
return _createElementVNode(_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, false);
}
const slotProps = {
'onClick:close': onChipClose,
onKeydown(e) {
if (e.key !== 'Enter' && e.key !== ' ') return;
e.preventDefault();
e.stopPropagation();
onChipClose(e);
},
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 _createElementVNode("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 ?? _createElementVNode("span", {
"class": "v-select__selection-text"
}, [item.title, props.multiple && index < model.value.length - 1 && _createElementVNode("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 _createElementVNode(_Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? _createVNode(VIcon, {
"class": "v-select__menu-icon",
"color": vTextFieldRef.value?.fieldIconColor,
"icon": props.menuIcon
}, null) : undefined]);
}
});
});
return forwardRefs({
isFocused,
menu,
select
}, vTextFieldRef);
}
});
//# sourceMappingURL=VSelect.js.map