1083 lines
34 KiB
JavaScript
1083 lines
34 KiB
JavaScript
import {
|
|
VTextField,
|
|
makeVTextFieldProps
|
|
} from "./chunk-6MO6MKTY.js";
|
|
import {
|
|
useAutocomplete
|
|
} from "./chunk-IZQZFEAL.js";
|
|
import {
|
|
VCheckboxBtn
|
|
} from "./chunk-6HLLVLOR.js";
|
|
import {
|
|
VChip
|
|
} from "./chunk-PLNIG6WP.js";
|
|
import {
|
|
VMenu
|
|
} from "./chunk-LPDOFVDK.js";
|
|
import {
|
|
VList,
|
|
VListItem,
|
|
VListSubheader,
|
|
makeItemsProps,
|
|
useItems
|
|
} from "./chunk-MQSMF5CI.js";
|
|
import {
|
|
VAvatar
|
|
} from "./chunk-SXI5CS7S.js";
|
|
import {
|
|
VDivider
|
|
} from "./chunk-X3WY3J75.js";
|
|
import {
|
|
useInputIcon
|
|
} from "./chunk-IK67YVHF.js";
|
|
import {
|
|
useForm
|
|
} from "./chunk-GAYXO4FM.js";
|
|
import {
|
|
VDialogTransition
|
|
} from "./chunk-B4JFJDWM.js";
|
|
import {
|
|
forwardRefs
|
|
} from "./chunk-GUNW7S2L.js";
|
|
import {
|
|
makeTransitionProps
|
|
} from "./chunk-CAGZXMOS.js";
|
|
import {
|
|
useDisplay
|
|
} from "./chunk-N4LJHDYD.js";
|
|
import {
|
|
VIcon
|
|
} from "./chunk-4XZHKYGH.js";
|
|
import {
|
|
VDefaultsProvider
|
|
} from "./chunk-PAT7NP2Z.js";
|
|
import {
|
|
IconValue
|
|
} from "./chunk-OJDZBU5D.js";
|
|
import {
|
|
makeDimensionProps,
|
|
useDimension
|
|
} from "./chunk-6EZKHCRW.js";
|
|
import {
|
|
useResizeObserver
|
|
} from "./chunk-XDSAO7OT.js";
|
|
import {
|
|
useLocale
|
|
} from "./chunk-ENTLCOCZ.js";
|
|
import {
|
|
useProxiedModel,
|
|
useToggleScope
|
|
} from "./chunk-KA77II4V.js";
|
|
import {
|
|
IN_BROWSER,
|
|
camelizeProps,
|
|
checkPrintable,
|
|
clamp,
|
|
convertToUnit,
|
|
debounce,
|
|
deepEqual,
|
|
ensureValidVNode,
|
|
genericComponent,
|
|
getCurrentInstance,
|
|
getPropertyFromItem,
|
|
getScrollParent,
|
|
makeComponentProps,
|
|
matchesSelector,
|
|
omit,
|
|
propsFactory,
|
|
useRender,
|
|
wrapInArray
|
|
} from "./chunk-LZ5T2ERG.js";
|
|
import {
|
|
Fragment,
|
|
computed,
|
|
createBaseVNode,
|
|
createTextVNode,
|
|
createVNode,
|
|
mergeProps,
|
|
nextTick,
|
|
normalizeClass,
|
|
normalizeStyle,
|
|
onMounted,
|
|
onScopeDispose,
|
|
ref,
|
|
shallowRef,
|
|
toRef,
|
|
toValue,
|
|
useId,
|
|
watch,
|
|
watchEffect
|
|
} from "./chunk-2MKFL3BX.js";
|
|
|
|
// node_modules/vuetify/lib/components/VVirtualScroll/VVirtualScroll.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VVirtualScroll/VVirtualScroll.css";
|
|
|
|
// node_modules/vuetify/lib/components/VVirtualScroll/VVirtualScrollItem.js
|
|
var makeVVirtualScrollItemProps = propsFactory({
|
|
renderless: Boolean,
|
|
...makeComponentProps()
|
|
}, "VVirtualScrollItem");
|
|
var VVirtualScrollItem = genericComponent()({
|
|
name: "VVirtualScrollItem",
|
|
inheritAttrs: false,
|
|
props: makeVVirtualScrollItemProps(),
|
|
emits: {
|
|
"update:height": (height) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
emit,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
resizeRef,
|
|
contentRect
|
|
} = useResizeObserver(void 0, "border");
|
|
watch(() => contentRect.value?.height, (height) => {
|
|
if (height != null) emit("update:height", height);
|
|
});
|
|
useRender(() => props.renderless ? createBaseVNode(Fragment, null, [slots.default?.({
|
|
itemRef: resizeRef
|
|
})]) : createBaseVNode("div", mergeProps({
|
|
"ref": resizeRef,
|
|
"class": ["v-virtual-scroll__item", props.class],
|
|
"style": props.style
|
|
}, attrs), [slots.default?.()]));
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/composables/virtual.js
|
|
var UP = -1;
|
|
var DOWN = 1;
|
|
var BUFFER_PX = 100;
|
|
var makeVirtualProps = propsFactory({
|
|
itemHeight: {
|
|
type: [Number, String],
|
|
default: null
|
|
},
|
|
itemKey: {
|
|
type: [String, Array, Function],
|
|
default: null
|
|
},
|
|
height: [Number, String]
|
|
}, "virtual");
|
|
function useVirtual(props, items) {
|
|
const display = useDisplay();
|
|
const itemHeight = shallowRef(0);
|
|
watchEffect(() => {
|
|
itemHeight.value = parseFloat(props.itemHeight || 0);
|
|
});
|
|
const first = shallowRef(0);
|
|
const last = shallowRef(Math.ceil(
|
|
// Assume 16px items filling the entire screen height if
|
|
// not provided. This is probably incorrect but it minimises
|
|
// the chance of ending up with empty space at the bottom.
|
|
// The default value is set here to avoid poisoning getSize()
|
|
(parseInt(props.height) || display.height.value) / (itemHeight.value || 16)
|
|
) || 1);
|
|
const paddingTop = shallowRef(0);
|
|
const paddingBottom = shallowRef(0);
|
|
const containerRef = ref();
|
|
const markerRef = ref();
|
|
let markerOffset = 0;
|
|
const {
|
|
resizeRef,
|
|
contentRect
|
|
} = useResizeObserver();
|
|
watchEffect(() => {
|
|
resizeRef.value = containerRef.value;
|
|
});
|
|
const viewportHeight = computed(() => {
|
|
return containerRef.value === document.documentElement ? display.height.value : contentRect.value?.height || parseInt(props.height) || 0;
|
|
});
|
|
const hasInitialRender = computed(() => {
|
|
return !!(containerRef.value && markerRef.value && viewportHeight.value && itemHeight.value);
|
|
});
|
|
let sizes = Array.from({
|
|
length: items.value.length
|
|
});
|
|
let offsets = Array.from({
|
|
length: items.value.length
|
|
});
|
|
const updateTime = shallowRef(0);
|
|
let targetScrollIndex = -1;
|
|
function getSize(index) {
|
|
return sizes[index] || itemHeight.value;
|
|
}
|
|
const updateOffsets = debounce(() => {
|
|
const start = performance.now();
|
|
offsets[0] = 0;
|
|
const length = items.value.length;
|
|
for (let i = 1; i <= length; i++) {
|
|
offsets[i] = (offsets[i - 1] || 0) + getSize(i - 1);
|
|
}
|
|
updateTime.value = Math.max(updateTime.value, performance.now() - start);
|
|
}, updateTime);
|
|
const unwatch = watch(hasInitialRender, (v) => {
|
|
if (!v) return;
|
|
unwatch();
|
|
markerOffset = markerRef.value.offsetTop;
|
|
updateOffsets.immediate();
|
|
calculateVisibleItems();
|
|
if (!~targetScrollIndex) return;
|
|
nextTick(() => {
|
|
IN_BROWSER && window.requestAnimationFrame(() => {
|
|
scrollToIndex(targetScrollIndex);
|
|
targetScrollIndex = -1;
|
|
});
|
|
});
|
|
});
|
|
onScopeDispose(() => {
|
|
updateOffsets.clear();
|
|
});
|
|
function handleItemResize(index, height) {
|
|
const prevHeight = sizes[index];
|
|
const prevMinHeight = itemHeight.value;
|
|
itemHeight.value = prevMinHeight ? Math.min(itemHeight.value, height) : height;
|
|
if (prevHeight !== height || prevMinHeight !== itemHeight.value) {
|
|
sizes[index] = height;
|
|
updateOffsets();
|
|
}
|
|
}
|
|
function calculateOffset(index) {
|
|
index = clamp(index, 0, items.value.length);
|
|
const whole = Math.floor(index);
|
|
const fraction = index % 1;
|
|
const next = whole + 1;
|
|
const wholeOffset = offsets[whole] || 0;
|
|
const nextOffset = offsets[next] || wholeOffset;
|
|
return wholeOffset + (nextOffset - wholeOffset) * fraction;
|
|
}
|
|
function calculateIndex(scrollTop) {
|
|
return binaryClosest(offsets, scrollTop);
|
|
}
|
|
let lastScrollTop = 0;
|
|
let scrollVelocity = 0;
|
|
let lastScrollTime = 0;
|
|
watch(viewportHeight, (val, oldVal) => {
|
|
calculateVisibleItems();
|
|
if (val < oldVal) {
|
|
requestAnimationFrame(() => {
|
|
scrollVelocity = 0;
|
|
calculateVisibleItems();
|
|
});
|
|
}
|
|
});
|
|
let scrollTimeout = -1;
|
|
function handleScroll() {
|
|
if (!containerRef.value || !markerRef.value) return;
|
|
const scrollTop = containerRef.value.scrollTop;
|
|
const scrollTime = performance.now();
|
|
const scrollDeltaT = scrollTime - lastScrollTime;
|
|
if (scrollDeltaT > 500) {
|
|
scrollVelocity = Math.sign(scrollTop - lastScrollTop);
|
|
markerOffset = markerRef.value.offsetTop;
|
|
} else {
|
|
scrollVelocity = scrollTop - lastScrollTop;
|
|
}
|
|
lastScrollTop = scrollTop;
|
|
lastScrollTime = scrollTime;
|
|
window.clearTimeout(scrollTimeout);
|
|
scrollTimeout = window.setTimeout(handleScrollend, 500);
|
|
calculateVisibleItems();
|
|
}
|
|
function handleScrollend() {
|
|
if (!containerRef.value || !markerRef.value) return;
|
|
scrollVelocity = 0;
|
|
lastScrollTime = 0;
|
|
window.clearTimeout(scrollTimeout);
|
|
calculateVisibleItems();
|
|
}
|
|
let raf = -1;
|
|
function calculateVisibleItems() {
|
|
cancelAnimationFrame(raf);
|
|
raf = requestAnimationFrame(_calculateVisibleItems);
|
|
}
|
|
function _calculateVisibleItems() {
|
|
if (!containerRef.value || !viewportHeight.value || !itemHeight.value) return;
|
|
const scrollTop = lastScrollTop - markerOffset;
|
|
const direction = Math.sign(scrollVelocity);
|
|
const startPx = Math.max(0, scrollTop - BUFFER_PX);
|
|
const start = clamp(calculateIndex(startPx), 0, items.value.length);
|
|
const endPx = scrollTop + viewportHeight.value + BUFFER_PX;
|
|
const end = clamp(calculateIndex(endPx) + 1, start + 1, items.value.length);
|
|
if (
|
|
// Only update the side we're scrolling towards,
|
|
// the other side will be updated incidentally
|
|
(direction !== UP || start < first.value) && (direction !== DOWN || end > last.value)
|
|
) {
|
|
const topOverflow = calculateOffset(first.value) - calculateOffset(start);
|
|
const bottomOverflow = calculateOffset(end) - calculateOffset(last.value);
|
|
const bufferOverflow = Math.max(topOverflow, bottomOverflow);
|
|
if (bufferOverflow > BUFFER_PX) {
|
|
first.value = start;
|
|
last.value = end;
|
|
} else {
|
|
if (start <= 0) first.value = start;
|
|
if (end >= items.value.length) last.value = end;
|
|
}
|
|
}
|
|
paddingTop.value = calculateOffset(first.value);
|
|
paddingBottom.value = calculateOffset(items.value.length) - calculateOffset(last.value);
|
|
}
|
|
function scrollToIndex(index) {
|
|
const offset = calculateOffset(index);
|
|
if (!containerRef.value || index && !offset) {
|
|
targetScrollIndex = index;
|
|
} else {
|
|
containerRef.value.scrollTop = offset;
|
|
}
|
|
}
|
|
const computedItems = computed(() => {
|
|
return items.value.slice(first.value, last.value).map((item, index) => {
|
|
const _index = index + first.value;
|
|
return {
|
|
raw: item,
|
|
index: _index,
|
|
key: getPropertyFromItem(item, props.itemKey, _index)
|
|
};
|
|
});
|
|
});
|
|
watch(items, () => {
|
|
sizes = Array.from({
|
|
length: items.value.length
|
|
});
|
|
offsets = Array.from({
|
|
length: items.value.length
|
|
});
|
|
updateOffsets.immediate();
|
|
calculateVisibleItems();
|
|
}, {
|
|
deep: 1
|
|
});
|
|
return {
|
|
calculateVisibleItems,
|
|
containerRef,
|
|
markerRef,
|
|
computedItems,
|
|
paddingTop,
|
|
paddingBottom,
|
|
scrollToIndex,
|
|
handleScroll,
|
|
handleScrollend,
|
|
handleItemResize
|
|
};
|
|
}
|
|
function binaryClosest(arr, val) {
|
|
let high = arr.length - 1;
|
|
let low = 0;
|
|
let mid = 0;
|
|
let item = null;
|
|
let target = -1;
|
|
if (arr[high] < val) {
|
|
return high;
|
|
}
|
|
while (low <= high) {
|
|
mid = low + high >> 1;
|
|
item = arr[mid];
|
|
if (item > val) {
|
|
high = mid - 1;
|
|
} else if (item < val) {
|
|
target = mid;
|
|
low = mid + 1;
|
|
} else if (item === val) {
|
|
return mid;
|
|
} else {
|
|
return low;
|
|
}
|
|
}
|
|
return target;
|
|
}
|
|
|
|
// node_modules/vuetify/lib/components/VVirtualScroll/VVirtualScroll.js
|
|
var makeVVirtualScrollProps = propsFactory({
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
renderless: Boolean,
|
|
...makeVirtualProps(),
|
|
...makeComponentProps(),
|
|
...makeDimensionProps()
|
|
}, "VVirtualScroll");
|
|
var VVirtualScroll = genericComponent()({
|
|
name: "VVirtualScroll",
|
|
props: makeVVirtualScrollProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const vm = getCurrentInstance("VVirtualScroll");
|
|
const {
|
|
dimensionStyles
|
|
} = useDimension(props);
|
|
const {
|
|
calculateVisibleItems,
|
|
containerRef,
|
|
markerRef,
|
|
handleScroll,
|
|
handleScrollend,
|
|
handleItemResize,
|
|
scrollToIndex,
|
|
paddingTop,
|
|
paddingBottom,
|
|
computedItems
|
|
} = useVirtual(props, toRef(() => props.items));
|
|
useToggleScope(() => props.renderless, () => {
|
|
function handleListeners() {
|
|
let add = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
|
|
const method = add ? "addEventListener" : "removeEventListener";
|
|
if (containerRef.value === document.documentElement) {
|
|
document[method]("scroll", handleScroll, {
|
|
passive: true
|
|
});
|
|
document[method]("scrollend", handleScrollend);
|
|
} else {
|
|
containerRef.value?.[method]("scroll", handleScroll, {
|
|
passive: true
|
|
});
|
|
containerRef.value?.[method]("scrollend", handleScrollend);
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
containerRef.value = getScrollParent(vm.vnode.el, true);
|
|
handleListeners(true);
|
|
});
|
|
onScopeDispose(handleListeners);
|
|
});
|
|
useRender(() => {
|
|
const children = computedItems.value.map((item) => createVNode(VVirtualScrollItem, {
|
|
"key": item.key,
|
|
"renderless": props.renderless,
|
|
"onUpdate:height": (height) => handleItemResize(item.index, height)
|
|
}, {
|
|
default: (slotProps) => slots.default?.({
|
|
item: item.raw,
|
|
index: item.index,
|
|
...slotProps
|
|
})
|
|
}));
|
|
return props.renderless ? createBaseVNode(Fragment, null, [createBaseVNode("div", {
|
|
"ref": markerRef,
|
|
"class": "v-virtual-scroll__spacer",
|
|
"style": {
|
|
paddingTop: convertToUnit(paddingTop.value)
|
|
}
|
|
}, null), children, createBaseVNode("div", {
|
|
"class": "v-virtual-scroll__spacer",
|
|
"style": {
|
|
paddingBottom: convertToUnit(paddingBottom.value)
|
|
}
|
|
}, null)]) : createBaseVNode("div", {
|
|
"ref": containerRef,
|
|
"class": normalizeClass(["v-virtual-scroll", props.class]),
|
|
"onScrollPassive": handleScroll,
|
|
"onScrollend": handleScrollend,
|
|
"style": normalizeStyle([dimensionStyles.value, props.style])
|
|
}, [createBaseVNode("div", {
|
|
"ref": markerRef,
|
|
"class": "v-virtual-scroll__container",
|
|
"style": {
|
|
paddingTop: convertToUnit(paddingTop.value),
|
|
paddingBottom: convertToUnit(paddingBottom.value)
|
|
}
|
|
}, [children])]);
|
|
});
|
|
return {
|
|
calculateVisibleItems,
|
|
scrollToIndex
|
|
};
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/components/VSelect/VSelect.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VSelect/VSelect.css";
|
|
|
|
// node_modules/vuetify/lib/components/VSelect/useScrolling.js
|
|
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
|
|
};
|
|
}
|
|
|
|
// node_modules/vuetify/lib/composables/menuActivator.js
|
|
var makeMenuActivatorProps = propsFactory({
|
|
closeText: {
|
|
type: String,
|
|
default: "$vuetify.close"
|
|
},
|
|
openText: {
|
|
type: String,
|
|
default: "$vuetify.open"
|
|
}
|
|
}, "autocomplete");
|
|
function useMenuActivator(props, isOpen) {
|
|
const uid = useId();
|
|
const menuId = computed(() => `menu-${uid}`);
|
|
const ariaExpanded = toRef(() => toValue(isOpen));
|
|
const ariaControls = toRef(() => menuId.value);
|
|
return {
|
|
menuId,
|
|
ariaExpanded,
|
|
ariaControls
|
|
};
|
|
}
|
|
|
|
// node_modules/vuetify/lib/components/VSelect/VSelect.js
|
|
var makeSelectProps = propsFactory({
|
|
chips: Boolean,
|
|
closableChips: Boolean,
|
|
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,
|
|
noAutoScroll: Boolean,
|
|
...makeMenuActivatorProps(),
|
|
...makeItemsProps({
|
|
itemChildren: false
|
|
})
|
|
}, "Select");
|
|
var makeVSelectProps = propsFactory({
|
|
...makeSelectProps(),
|
|
...omit(makeVTextFieldProps({
|
|
modelValue: null,
|
|
role: "combobox"
|
|
}), ["validationValue", "dirty"]),
|
|
...makeTransitionProps({
|
|
transition: {
|
|
component: VDialogTransition
|
|
}
|
|
})
|
|
}, "VSelect");
|
|
var 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 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(() => {
|
|
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 {
|
|
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);
|
|
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 (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");
|
|
}
|
|
const KEYBOARD_LOOKUP_THRESHOLD = 1e3;
|
|
if (!checkPrintable(e)) return;
|
|
const now = performance.now();
|
|
if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
|
|
keyboardLookupPrefix = "";
|
|
keyboardLookupIndex = 0;
|
|
}
|
|
keyboardLookupPrefix += e.key.toLowerCase();
|
|
keyboardLookupLastTime = now;
|
|
const items2 = displayItems.value;
|
|
function findItem() {
|
|
let result2 = findItemBase();
|
|
if (result2) return result2;
|
|
if (keyboardLookupPrefix.at(-1) === keyboardLookupPrefix.at(-2)) {
|
|
keyboardLookupPrefix = keyboardLookupPrefix.slice(0, -1);
|
|
keyboardLookupIndex++;
|
|
result2 = findItemBase();
|
|
if (result2) return result2;
|
|
}
|
|
keyboardLookupIndex = 0;
|
|
result2 = findItemBase();
|
|
if (result2) return result2;
|
|
keyboardLookupPrefix = e.key.toLowerCase();
|
|
return findItemBase();
|
|
}
|
|
function findItemBase() {
|
|
for (let i = keyboardLookupIndex; i < items2.length; i++) {
|
|
const _item = items2[i];
|
|
if (_item.title.toLowerCase().startsWith(keyboardLookupPrefix)) {
|
|
return [_item, i];
|
|
}
|
|
}
|
|
return void 0;
|
|
}
|
|
const result = findItem();
|
|
if (!result) return;
|
|
const [item, index] = result;
|
|
keyboardLookupIndex = index;
|
|
listRef.value?.focus(index);
|
|
if (!props.multiple) {
|
|
model.value = [item];
|
|
}
|
|
}
|
|
function select(item) {
|
|
let set = arguments.length > 1 && arguments[1] !== void 0 ? 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((item2) => item2.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 && !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 ? void 0 : props.placeholder;
|
|
return createVNode(VTextField, mergeProps({
|
|
"ref": vTextFieldRef
|
|
}, textFieldProps, {
|
|
"modelValue": model.value.map((v) => v.props.title).join(", "),
|
|
"name": void 0,
|
|
"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: (_ref2) => {
|
|
let {
|
|
id
|
|
} = _ref2;
|
|
return createBaseVNode(Fragment, null, [createBaseVNode("select", {
|
|
"hidden": true,
|
|
"multiple": props.multiple,
|
|
"name": autocomplete.fieldName.value
|
|
}, [items.value.map((item) => createBaseVNode("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: () => [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",
|
|
"selectable": true,
|
|
"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: (_ref3) => {
|
|
let {
|
|
item,
|
|
index,
|
|
itemRef
|
|
} = _ref3;
|
|
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,
|
|
index,
|
|
props: itemProps
|
|
}) ?? createVNode(VListItem, mergeProps(itemProps, {
|
|
"role": "option"
|
|
}), {
|
|
prepend: (_ref4) => {
|
|
let {
|
|
isSelected
|
|
} = _ref4;
|
|
return createBaseVNode(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) : void 0, camelizedProps.prependAvatar && createVNode(VAvatar, {
|
|
"image": camelizedProps.prependAvatar
|
|
}, null), camelizedProps.prependIcon && createVNode(VIcon, {
|
|
"icon": camelizedProps.prependIcon
|
|
}, null)]);
|
|
}
|
|
});
|
|
}
|
|
}), slots["append-item"]?.()]
|
|
})]
|
|
}), 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": void 0
|
|
});
|
|
const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
|
|
const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
|
|
item,
|
|
index,
|
|
props: slotProps
|
|
}) : slots.selection({
|
|
item,
|
|
index
|
|
})) : void 0;
|
|
if (hasSlot && !slotContent) return void 0;
|
|
return createBaseVNode("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 ?? createBaseVNode("span", {
|
|
"class": "v-select__selection-text"
|
|
}, [item.title, props.multiple && index < model.value.length - 1 && createBaseVNode("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 createBaseVNode(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) : void 0, props.appendInnerIcon && createVNode(InputIcon, {
|
|
"key": "append-icon",
|
|
"name": "appendInner",
|
|
"color": args[0].iconColor.value
|
|
}, null)]);
|
|
}
|
|
});
|
|
});
|
|
return forwardRefs({
|
|
isFocused,
|
|
menu,
|
|
select
|
|
}, vTextFieldRef);
|
|
}
|
|
});
|
|
|
|
export {
|
|
VVirtualScrollItem,
|
|
makeVirtualProps,
|
|
useVirtual,
|
|
VVirtualScroll,
|
|
useScrolling,
|
|
useMenuActivator,
|
|
makeSelectProps,
|
|
VSelect
|
|
};
|
|
//# sourceMappingURL=chunk-IZDIYS2S.js.map
|