routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+71
@@ -0,0 +1,71 @@
|
||||
@layer vuetify-components {
|
||||
.v-select--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
|
||||
.v-select--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
|
||||
.v-select--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
|
||||
.v-select--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
||||
top: 0px;
|
||||
}
|
||||
.v-select .v-field .v-text-field__prefix,
|
||||
.v-select .v-field .v-text-field__suffix,
|
||||
.v-select .v-field .v-field__input, .v-select .v-field.v-field {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-select .v-field .v-field__input > input {
|
||||
align-self: flex-start;
|
||||
opacity: 1;
|
||||
flex: 0 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
caret-color: transparent;
|
||||
padding-inline: inherit;
|
||||
}
|
||||
.v-select .v-field--dirty .v-select__selection {
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
.v-select .v-select__selection-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-select__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-select__content {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
|
||||
}
|
||||
.v-menu > .v-overlay__content.v-select__content {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-select__content > .v-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-select__mask {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
.v-select__selection {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
max-width: 100%;
|
||||
}
|
||||
.v-select .v-select__selection:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.v-select--selected .v-field .v-field__input > input {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-select__menu-icon {
|
||||
margin-inline-start: 4px;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-select--active-menu .v-select__menu-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
+13836
File diff suppressed because one or more lines are too long
+594
@@ -0,0 +1,594 @@
|
||||
import { Fragment as _Fragment, createElementVNode as _createElementVNode, createVNode as _createVNode, 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 { VDivider } from "../VDivider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { useInputIcon } from "../VInput/InputIcon.js";
|
||||
import { VList, VListItem, VListSubheader } from "../VList/index.js";
|
||||
import { VMenu } from "../VMenu/index.js";
|
||||
import { VSheet } from "../VSheet/index.js";
|
||||
import { makeVTextFieldProps, VTextField } from "../VTextField/VTextField.js";
|
||||
import { VVirtualScroll } from "../VVirtualScroll/index.js"; // Composables
|
||||
import { useScrolling } from "./useScrolling.js";
|
||||
import { useFocusGroups } from "../../composables/focusGroups.js";
|
||||
import { useAutocomplete } from "../../composables/autocomplete.js";
|
||||
import { highlightResult, makeFilterProps, useFilter } from "../../composables/filter.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 { makeMenuActivatorProps, useMenuActivator } from "../../composables/menuActivator.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 { camelizeProps, checkPrintable, deepEqual, ensureValidVNode, genericComponent, IN_BROWSER, matchesSelector, omit, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
|
||||
export const makeSelectProps = propsFactory({
|
||||
chips: Boolean,
|
||||
closableChips: Boolean,
|
||||
eager: Boolean,
|
||||
hideNoData: Boolean,
|
||||
hideSelected: Boolean,
|
||||
listProps: {
|
||||
type: Object
|
||||
},
|
||||
menu: Boolean,
|
||||
menuElevation: [Number, String],
|
||||
menuIcon: {
|
||||
type: IconValue,
|
||||
default: '$dropdown'
|
||||
},
|
||||
menuProps: {
|
||||
type: Object
|
||||
},
|
||||
multiple: Boolean,
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: '$vuetify.noDataText'
|
||||
},
|
||||
openOnClear: Boolean,
|
||||
itemColor: String,
|
||||
noAutoScroll: Boolean,
|
||||
...makeMenuActivatorProps(),
|
||||
...makeItemsProps({
|
||||
itemChildren: false
|
||||
})
|
||||
}, 'Select');
|
||||
export const makeVSelectProps = propsFactory({
|
||||
search: String,
|
||||
...makeFilterProps({
|
||||
filterKeys: ['title']
|
||||
}),
|
||||
...makeSelectProps(),
|
||||
...omit(makeVTextFieldProps({
|
||||
modelValue: null,
|
||||
role: 'combobox'
|
||||
}), ['validationValue', 'dirty']),
|
||||
...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,
|
||||
'update:search': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const vTextFieldRef = ref();
|
||||
const vMenuRef = ref();
|
||||
const headerRef = ref();
|
||||
const footerRef = ref();
|
||||
const vVirtualScrollRef = ref();
|
||||
const {
|
||||
items,
|
||||
transformIn,
|
||||
transformOut
|
||||
} = useItems(props);
|
||||
const search = useProxiedModel(props, 'search', '');
|
||||
const {
|
||||
filteredItems,
|
||||
getMatches
|
||||
} = useFilter(props, items, () => search.value);
|
||||
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 autocomplete = useAutocomplete(props);
|
||||
const selectedValues = computed(() => model.value.map(selection => selection.value));
|
||||
const isFocused = shallowRef(false);
|
||||
const closableChips = toRef(() => props.closableChips && !form.isReadonly.value && !form.isDisabled.value);
|
||||
const {
|
||||
InputIcon
|
||||
} = useInputIcon(props);
|
||||
let keyboardLookupPrefix = '';
|
||||
let keyboardLookupIndex = 0;
|
||||
let keyboardLookupLastTime;
|
||||
const displayItems = computed(() => {
|
||||
const baseItems = search.value ? filteredItems.value : items.value;
|
||||
if (props.hideSelected) {
|
||||
return baseItems.filter(item => !model.value.some(s => (props.valueComparator || deepEqual)(s, item)));
|
||||
}
|
||||
return baseItems;
|
||||
});
|
||||
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 {
|
||||
menuId,
|
||||
ariaExpanded,
|
||||
ariaControls
|
||||
} = useMenuActivator(props, menu);
|
||||
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);
|
||||
const {
|
||||
onTabKeydown
|
||||
} = useFocusGroups({
|
||||
groups: [{
|
||||
type: 'element',
|
||||
contentRef: headerRef
|
||||
}, {
|
||||
type: 'list',
|
||||
contentRef: listRef,
|
||||
displayItemsCount: () => displayItems.value.length
|
||||
}, {
|
||||
type: 'element',
|
||||
contentRef: footerRef
|
||||
}],
|
||||
onLeave: () => {
|
||||
menu.value = false;
|
||||
vTextFieldRef.value?.focus();
|
||||
}
|
||||
});
|
||||
function onClear(e) {
|
||||
if (props.openOnClear) {
|
||||
menu.value = true;
|
||||
}
|
||||
}
|
||||
function onMousedownControl() {
|
||||
if (menuDisabled.value) return;
|
||||
menu.value = !menu.value;
|
||||
}
|
||||
function onMenuKeydown(e) {
|
||||
if (e.key === 'Tab') {
|
||||
onTabKeydown(e);
|
||||
}
|
||||
if (listRef.value?.$el.contains(e.target) && 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 (props.clearable && e.key === 'Backspace') {
|
||||
e.preventDefault();
|
||||
model.value = [];
|
||||
onClear(e);
|
||||
return;
|
||||
}
|
||||
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 = 0;
|
||||
}
|
||||
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);
|
||||
keyboardLookupIndex++;
|
||||
result = findItemBase();
|
||||
if (result) return result;
|
||||
}
|
||||
|
||||
// Still nothing, wrap around to the top
|
||||
keyboardLookupIndex = 0;
|
||||
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; 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, set = 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) {
|
||||
const target = e.target;
|
||||
if (!vTextFieldRef.value?.$el.contains(target)) {
|
||||
menu.value = false;
|
||||
}
|
||||
}
|
||||
function getSelectedIndex() {
|
||||
return displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
|
||||
}
|
||||
function getSelectedFocusableIndex() {
|
||||
if (!model.value.length) return -1;
|
||||
const comparator = props.valueComparator || deepEqual;
|
||||
let focusableIndex = 0;
|
||||
for (const item of displayItems.value) {
|
||||
const isSelected = model.value.some(s => comparator(s.value, item.value));
|
||||
if (isSelected) return item.props.disabled ? -1 : focusableIndex;
|
||||
if (!item.props.disabled) focusableIndex++;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
function onAfterEnter() {
|
||||
if (props.eager) {
|
||||
vVirtualScrollRef.value?.calculateVisibleItems();
|
||||
}
|
||||
if (listRef.value && isFocused.value) {
|
||||
const index = getSelectedFocusableIndex();
|
||||
listRef.value.focus(index >= 0 ? index : 'first');
|
||||
}
|
||||
}
|
||||
function onAfterLeave() {
|
||||
search.value = '';
|
||||
if (isFocused.value) {
|
||||
vTextFieldRef.value?.focus();
|
||||
}
|
||||
}
|
||||
function onFocusin(e) {
|
||||
isFocused.value = true;
|
||||
}
|
||||
function onFocusout(e) {
|
||||
if (!vTextFieldRef.value?.$el.contains(e.relatedTarget) && !e.currentTarget.contains(e.relatedTarget)) {
|
||||
isFocused.value = false;
|
||||
}
|
||||
}
|
||||
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 = getSelectedIndex();
|
||||
IN_BROWSER && !props.noAutoScroll && window.requestAnimationFrame(() => {
|
||||
index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
watch(items, (newVal, oldVal) => {
|
||||
if (menu.value) return;
|
||||
if (isFocused.value && props.hideNoData && !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;
|
||||
const menuSlotProps = {
|
||||
search,
|
||||
filteredItems: filteredItems.value
|
||||
};
|
||||
return _createVNode(VTextField, _mergeProps({
|
||||
"ref": vTextFieldRef
|
||||
}, textFieldProps, {
|
||||
"modelValue": model.value.map(v => v.props.title).join(', '),
|
||||
"name": undefined,
|
||||
"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-expanded": ariaExpanded.value,
|
||||
"aria-controls": ariaControls.value
|
||||
}), {
|
||||
...slots,
|
||||
default: ({
|
||||
id
|
||||
}) => _createElementVNode(_Fragment, null, [_createElementVNode("select", {
|
||||
"hidden": true,
|
||||
"multiple": props.multiple,
|
||||
"name": autocomplete.fieldName.value
|
||||
}, [items.value.map(item => _createElementVNode("option", {
|
||||
"key": item.value,
|
||||
"value": item.value,
|
||||
"selected": selectedValues.value.includes(item.value)
|
||||
}, null))]), _createVNode(VMenu, _mergeProps({
|
||||
"id": menuId.value,
|
||||
"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: () => [_createVNode(VSheet, {
|
||||
"elevation": props.menuElevation,
|
||||
"onFocusin": onFocusin,
|
||||
"onFocusout": onFocusout,
|
||||
"onKeydown": onMenuKeydown
|
||||
}, {
|
||||
default: () => [slots['menu-header'] && _createElementVNode("header", {
|
||||
"ref": headerRef
|
||||
}, [slots['menu-header'](menuSlotProps)]), hasList && _createVNode(VList, _mergeProps({
|
||||
"key": "select-list",
|
||||
"ref": listRef,
|
||||
"selected": selectedValues.value,
|
||||
"selectStrategy": props.multiple ? 'independent' : 'single-independent',
|
||||
"tabindex": "-1",
|
||||
"selectable": !!displayItems.value.length,
|
||||
"aria-live": "polite",
|
||||
"aria-labelledby": `${id.value}-label`,
|
||||
"aria-multiselectable": props.multiple,
|
||||
"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: ({
|
||||
item,
|
||||
index,
|
||||
itemRef
|
||||
}) => {
|
||||
const camelizedProps = camelizeProps(item.props);
|
||||
const itemProps = mergeProps(item.props, {
|
||||
ref: itemRef,
|
||||
key: item.value,
|
||||
onClick: () => select(item, null),
|
||||
'aria-posinset': index + 1,
|
||||
'aria-setsize': displayItems.value.length
|
||||
});
|
||||
if (item.type === 'divider') {
|
||||
return slots.divider?.({
|
||||
props: item.raw,
|
||||
index
|
||||
}) ?? _createVNode(VDivider, _mergeProps(item.props, {
|
||||
"key": `divider-${index}`
|
||||
}), null);
|
||||
}
|
||||
if (item.type === 'subheader') {
|
||||
return slots.subheader?.({
|
||||
props: item.raw,
|
||||
index
|
||||
}) ?? _createVNode(VListSubheader, _mergeProps(item.props, {
|
||||
"key": `subheader-${index}`
|
||||
}), null);
|
||||
}
|
||||
return slots.item?.({
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
index,
|
||||
props: itemProps
|
||||
}) ?? _createVNode(VListItem, _mergeProps(itemProps, {
|
||||
"role": "option"
|
||||
}), {
|
||||
prepend: ({
|
||||
isSelected
|
||||
}) => _createElementVNode(_Fragment, null, [props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
|
||||
"key": item.value,
|
||||
"modelValue": isSelected,
|
||||
"ripple": false,
|
||||
"tabindex": "-1",
|
||||
"aria-hidden": true,
|
||||
"onClick": event => event.preventDefault()
|
||||
}, null) : undefined, camelizedProps.prependAvatar && _createVNode(VAvatar, {
|
||||
"image": camelizedProps.prependAvatar
|
||||
}, null), camelizedProps.prependIcon && _createVNode(VIcon, {
|
||||
"icon": camelizedProps.prependIcon
|
||||
}, null)]),
|
||||
title: () => {
|
||||
return search.value ? highlightResult('v-select', item.title, getMatches(item)?.title) : item.title;
|
||||
}
|
||||
});
|
||||
}
|
||||
}), slots['append-item']?.()]
|
||||
}), slots['menu-footer'] && _createElementVNode("footer", {
|
||||
"ref": footerRef
|
||||
}, [slots['menu-footer'](menuSlotProps)])]
|
||||
})]
|
||||
}), model.value.map((item, index) => {
|
||||
function onChipClose(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
select(item, false);
|
||||
}
|
||||
const slotProps = mergeProps(VChip.filterProps(item.props), {
|
||||
'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: item.raw,
|
||||
internalItem: item,
|
||||
index,
|
||||
props: slotProps
|
||||
}) : slots.selection({
|
||||
item: item.raw,
|
||||
internalItem: 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": closableChips.value,
|
||||
"size": "small",
|
||||
"text": item.title,
|
||||
"disabled": item.props.disabled
|
||||
}, slotProps), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "chip-defaults",
|
||||
"defaults": {
|
||||
VChip: {
|
||||
closable: closableChips.value,
|
||||
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': (...args) => _createElementVNode(_Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? _createVNode(VIcon, {
|
||||
"class": "v-select__menu-icon",
|
||||
"color": vTextFieldRef.value?.fieldIconColor,
|
||||
"icon": props.menuIcon,
|
||||
"aria-hidden": true
|
||||
}, null) : undefined, props.appendInnerIcon && _createVNode(InputIcon, {
|
||||
"key": "append-icon",
|
||||
"name": "appendInner",
|
||||
"color": args[0].iconColor.value
|
||||
}, null)])
|
||||
});
|
||||
});
|
||||
return forwardRefs({
|
||||
isFocused,
|
||||
menu,
|
||||
search,
|
||||
filteredItems,
|
||||
select
|
||||
}, vTextFieldRef);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSelect.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+79
@@ -0,0 +1,79 @@
|
||||
@use 'sass:selector'
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-select
|
||||
@include select-compact-chip-label
|
||||
|
||||
.v-field
|
||||
.v-text-field__prefix,
|
||||
.v-text-field__suffix,
|
||||
.v-field__input,
|
||||
&.v-field
|
||||
cursor: pointer
|
||||
|
||||
.v-field
|
||||
.v-field__input
|
||||
> input
|
||||
align-self: flex-start
|
||||
opacity: 1
|
||||
flex: 0 0
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
width: 100%
|
||||
transition: none
|
||||
pointer-events: none
|
||||
caret-color: transparent
|
||||
padding-inline: inherit
|
||||
|
||||
.v-field--dirty
|
||||
.v-select__selection
|
||||
margin-inline-end: 2px
|
||||
|
||||
.v-select__selection-text
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
&__content
|
||||
overflow: hidden
|
||||
@include tools.elevation($select-content-elevation)
|
||||
|
||||
@at-root #{selector.append('.v-menu > .v-overlay__content', &)}
|
||||
@include tools.rounded($select-content-border-radius)
|
||||
|
||||
> .v-sheet
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
&__mask
|
||||
background: rgb(var(--v-theme-surface-light))
|
||||
|
||||
&__selection
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
letter-spacing: inherit
|
||||
line-height: inherit
|
||||
max-width: 100%
|
||||
|
||||
.v-select__selection
|
||||
&:first-child
|
||||
margin-inline-start: 0
|
||||
|
||||
&--selected
|
||||
.v-field
|
||||
.v-field__input
|
||||
> input
|
||||
opacity: 0
|
||||
|
||||
&__menu-icon
|
||||
margin-inline-start: 4px
|
||||
transition: $select-transition
|
||||
|
||||
.v-select--active-menu &
|
||||
transform: rotate(180deg)
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@mixin select-compact-chip-label {
|
||||
&--chips.v-input--density-compact {
|
||||
.v-field--variant-solo,
|
||||
.v-field--variant-solo-inverted,
|
||||
.v-field--variant-filled,
|
||||
.v-field--variant-solo-filled {
|
||||
.v-label.v-field-label {
|
||||
&--floating {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// Defaults
|
||||
$select-content-border-radius: 4px !default;
|
||||
$select-content-elevation: 2 !default;
|
||||
$select-line-height: 1.75 !default;
|
||||
$select-transition: .2s settings.$standard-easing !default;
|
||||
$select-chips-control-min-height: null !default;
|
||||
$select-chips-margin-top: null !default;
|
||||
$select-chips-margin-bottom: null !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VSelect } from './VSelect.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VSelect } from "./VSelect.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VSelect"],"sources":["../../../src/components/VSelect/index.ts"],"sourcesContent":["export { VSelect } from './VSelect'\n"],"mappings":"SAASA,OAAO","ignoreList":[]}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { Ref } from 'vue';
|
||||
import type { VList } from '../VList/index.js';
|
||||
import type { VTextField } from '../VTextField/index.js';
|
||||
export declare function useScrolling(listRef: Ref<VList | undefined>, textFieldRef: Ref<VTextField | undefined>): Record<string, Function>;
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
// Utilities
|
||||
import { shallowRef, watch } from 'vue';
|
||||
|
||||
// Types
|
||||
|
||||
export function useScrolling(listRef, textFieldRef) {
|
||||
const isScrolling = shallowRef(false);
|
||||
let scrollTimeout;
|
||||
function onListScroll(e) {
|
||||
cancelAnimationFrame(scrollTimeout);
|
||||
isScrolling.value = true;
|
||||
scrollTimeout = requestAnimationFrame(() => {
|
||||
scrollTimeout = requestAnimationFrame(() => {
|
||||
isScrolling.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
async function finishScrolling() {
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
await new Promise(resolve => {
|
||||
if (isScrolling.value) {
|
||||
const stop = watch(isScrolling, () => {
|
||||
stop();
|
||||
resolve();
|
||||
});
|
||||
} else resolve();
|
||||
});
|
||||
}
|
||||
async function onListKeydown(e) {
|
||||
if (e.key === 'Tab') {
|
||||
textFieldRef.value?.focus();
|
||||
}
|
||||
if (!['PageDown', 'PageUp', 'Home', 'End'].includes(e.key)) return;
|
||||
const el = listRef.value?.$el;
|
||||
if (!el) return;
|
||||
if (e.key === 'Home' || e.key === 'End') {
|
||||
el.scrollTo({
|
||||
top: e.key === 'Home' ? 0 : el.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
await finishScrolling();
|
||||
const children = el.querySelectorAll(':scope > :not(.v-virtual-scroll__spacer)');
|
||||
if (e.key === 'PageDown' || e.key === 'Home') {
|
||||
const top = el.getBoundingClientRect().top;
|
||||
for (const child of children) {
|
||||
if (child.getBoundingClientRect().top >= top) {
|
||||
child.focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const bottom = el.getBoundingClientRect().bottom;
|
||||
for (const child of [...children].reverse()) {
|
||||
if (child.getBoundingClientRect().bottom <= bottom) {
|
||||
child.focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
onScrollPassive: onListScroll,
|
||||
onKeydown: onListKeydown
|
||||
}; // typescript doesn't know about vue's event merging
|
||||
}
|
||||
//# sourceMappingURL=useScrolling.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user