major server manager overhaul
This commit is contained in:
+865
@@ -0,0 +1,865 @@
|
||||
import {
|
||||
VAvatar
|
||||
} from "./chunk-SXI5CS7S.js";
|
||||
import {
|
||||
VExpandXTransition,
|
||||
VFadeTransition
|
||||
} from "./chunk-B4JFJDWM.js";
|
||||
import {
|
||||
useGoTo
|
||||
} from "./chunk-NJV3GUE4.js";
|
||||
import {
|
||||
makeDisplayProps,
|
||||
useDisplay
|
||||
} from "./chunk-N4LJHDYD.js";
|
||||
import {
|
||||
makeGroupItemProps,
|
||||
makeGroupProps,
|
||||
useGroup,
|
||||
useGroupItem
|
||||
} from "./chunk-W6DJL42A.js";
|
||||
import {
|
||||
genOverlays,
|
||||
makeVariantProps,
|
||||
useVariant
|
||||
} from "./chunk-ADXDXPPR.js";
|
||||
import {
|
||||
makeBorderProps,
|
||||
useBorder
|
||||
} from "./chunk-X7YBE6PF.js";
|
||||
import {
|
||||
makeElevationProps,
|
||||
useElevation
|
||||
} from "./chunk-YJD2PNP6.js";
|
||||
import {
|
||||
makeDensityProps,
|
||||
useDensity
|
||||
} from "./chunk-TM3MIDYC.js";
|
||||
import {
|
||||
VIcon
|
||||
} from "./chunk-4XZHKYGH.js";
|
||||
import {
|
||||
makeSizeProps,
|
||||
useSize
|
||||
} from "./chunk-PIT7IT55.js";
|
||||
import {
|
||||
makeRoundedProps,
|
||||
useRounded
|
||||
} from "./chunk-AQK3CYVW.js";
|
||||
import {
|
||||
VDefaultsProvider
|
||||
} from "./chunk-PAT7NP2Z.js";
|
||||
import {
|
||||
makeTagProps
|
||||
} from "./chunk-2HZIACSB.js";
|
||||
import {
|
||||
IconValue
|
||||
} from "./chunk-OJDZBU5D.js";
|
||||
import {
|
||||
makeRouterProps,
|
||||
useLink
|
||||
} from "./chunk-573D4TYC.js";
|
||||
import {
|
||||
ripple_default
|
||||
} from "./chunk-DS4J67XG.js";
|
||||
import {
|
||||
useResizeObserver
|
||||
} from "./chunk-XDSAO7OT.js";
|
||||
import {
|
||||
useLocale,
|
||||
useRtl
|
||||
} from "./chunk-ENTLCOCZ.js";
|
||||
import {
|
||||
useProxiedModel
|
||||
} from "./chunk-KA77II4V.js";
|
||||
import {
|
||||
makeThemeProps,
|
||||
provideTheme
|
||||
} from "./chunk-3DSR7NCB.js";
|
||||
import {
|
||||
EventProp,
|
||||
IN_BROWSER,
|
||||
deepEqual,
|
||||
focusableChildren,
|
||||
genericComponent,
|
||||
makeComponentProps,
|
||||
propsFactory,
|
||||
provideDefaults,
|
||||
useRender
|
||||
} from "./chunk-LZ5T2ERG.js";
|
||||
import {
|
||||
Fragment,
|
||||
computed,
|
||||
createBaseVNode,
|
||||
createVNode,
|
||||
mergeProps,
|
||||
normalizeClass,
|
||||
normalizeStyle,
|
||||
shallowRef,
|
||||
toDisplayString,
|
||||
toRef,
|
||||
vShow,
|
||||
watch,
|
||||
withDirectives
|
||||
} from "./chunk-2MKFL3BX.js";
|
||||
|
||||
// node_modules/vuetify/lib/components/VChip/VChip.js
|
||||
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VChip/VChip.css";
|
||||
|
||||
// node_modules/vuetify/lib/components/VChipGroup/VChipGroup.js
|
||||
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VChipGroup/VChipGroup.css";
|
||||
|
||||
// node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.js
|
||||
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.css";
|
||||
|
||||
// node_modules/vuetify/lib/components/VSlideGroup/helpers.js
|
||||
function calculateUpdatedTarget(_ref) {
|
||||
let {
|
||||
selectedElement,
|
||||
containerElement,
|
||||
isRtl,
|
||||
isHorizontal
|
||||
} = _ref;
|
||||
const containerSize = getOffsetSize(isHorizontal, containerElement);
|
||||
const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement);
|
||||
const childrenSize = getOffsetSize(isHorizontal, selectedElement);
|
||||
const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement);
|
||||
const additionalOffset = childrenSize * 0.4;
|
||||
if (scrollPosition > childrenStartPosition) {
|
||||
return childrenStartPosition - additionalOffset;
|
||||
} else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) {
|
||||
return childrenStartPosition - containerSize + childrenSize + additionalOffset;
|
||||
}
|
||||
return scrollPosition;
|
||||
}
|
||||
function calculateCenteredTarget(_ref2) {
|
||||
let {
|
||||
selectedElement,
|
||||
containerElement,
|
||||
isHorizontal
|
||||
} = _ref2;
|
||||
const containerOffsetSize = getOffsetSize(isHorizontal, containerElement);
|
||||
const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement);
|
||||
const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement);
|
||||
return childrenOffsetPosition - containerOffsetSize / 2 + childrenOffsetSize / 2;
|
||||
}
|
||||
function getScrollSize(isHorizontal, element) {
|
||||
const key = isHorizontal ? "scrollWidth" : "scrollHeight";
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
function getClientSize(isHorizontal, element) {
|
||||
const key = isHorizontal ? "clientWidth" : "clientHeight";
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
function getScrollPosition(isHorizontal, rtl, element) {
|
||||
if (!element) {
|
||||
return 0;
|
||||
}
|
||||
const {
|
||||
scrollLeft,
|
||||
offsetWidth,
|
||||
scrollWidth
|
||||
} = element;
|
||||
if (isHorizontal) {
|
||||
return rtl ? scrollWidth - offsetWidth + scrollLeft : scrollLeft;
|
||||
}
|
||||
return element.scrollTop;
|
||||
}
|
||||
function getOffsetSize(isHorizontal, element) {
|
||||
const key = isHorizontal ? "offsetWidth" : "offsetHeight";
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
function getOffsetPosition(isHorizontal, element) {
|
||||
const key = isHorizontal ? "offsetLeft" : "offsetTop";
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
|
||||
// node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.js
|
||||
var VSlideGroupSymbol = /* @__PURE__ */ Symbol.for("vuetify:v-slide-group");
|
||||
var makeVSlideGroupProps = propsFactory({
|
||||
centerActive: Boolean,
|
||||
scrollToActive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
contentClass: null,
|
||||
direction: {
|
||||
type: String,
|
||||
default: "horizontal"
|
||||
},
|
||||
symbol: {
|
||||
type: null,
|
||||
default: VSlideGroupSymbol
|
||||
},
|
||||
nextIcon: {
|
||||
type: IconValue,
|
||||
default: "$next"
|
||||
},
|
||||
prevIcon: {
|
||||
type: IconValue,
|
||||
default: "$prev"
|
||||
},
|
||||
showArrows: {
|
||||
type: [Boolean, String],
|
||||
validator: (v) => typeof v === "boolean" || ["always", "desktop", "mobile", "never"].includes(v)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDisplayProps({
|
||||
mobile: null
|
||||
}),
|
||||
...makeTagProps(),
|
||||
...makeGroupProps({
|
||||
selectedClass: "v-slide-group-item--active"
|
||||
})
|
||||
}, "VSlideGroup");
|
||||
var VSlideGroup = genericComponent()({
|
||||
name: "VSlideGroup",
|
||||
props: makeVSlideGroupProps(),
|
||||
emits: {
|
||||
"update:modelValue": (value) => true
|
||||
},
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
const {
|
||||
isRtl
|
||||
} = useRtl();
|
||||
const {
|
||||
displayClasses,
|
||||
mobile
|
||||
} = useDisplay(props);
|
||||
const group = useGroup(props, props.symbol);
|
||||
const isOverflowing = shallowRef(false);
|
||||
const scrollOffset = shallowRef(0);
|
||||
const containerSize = shallowRef(0);
|
||||
const contentSize = shallowRef(0);
|
||||
const isHorizontal = computed(() => props.direction === "horizontal");
|
||||
const {
|
||||
resizeRef: containerRef,
|
||||
contentRect: containerRect
|
||||
} = useResizeObserver();
|
||||
const {
|
||||
resizeRef: contentRef,
|
||||
contentRect
|
||||
} = useResizeObserver();
|
||||
const goTo = useGoTo();
|
||||
const goToOptions = computed(() => {
|
||||
return {
|
||||
container: containerRef.el,
|
||||
duration: 200,
|
||||
easing: "easeOutQuart"
|
||||
};
|
||||
});
|
||||
const firstSelectedIndex = computed(() => {
|
||||
if (!group.selected.value.length) return -1;
|
||||
return group.items.value.findIndex((item) => item.id === group.selected.value[0]);
|
||||
});
|
||||
const lastSelectedIndex = computed(() => {
|
||||
if (!group.selected.value.length) return -1;
|
||||
return group.items.value.findIndex((item) => item.id === group.selected.value[group.selected.value.length - 1]);
|
||||
});
|
||||
if (IN_BROWSER) {
|
||||
let frame = -1;
|
||||
watch(() => [group.selected.value, containerRect.value, contentRect.value, isHorizontal.value], () => {
|
||||
cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() => {
|
||||
if (containerRect.value && contentRect.value) {
|
||||
const sizeProperty = isHorizontal.value ? "width" : "height";
|
||||
containerSize.value = containerRect.value[sizeProperty];
|
||||
contentSize.value = contentRect.value[sizeProperty];
|
||||
isOverflowing.value = containerSize.value + 1 < contentSize.value;
|
||||
}
|
||||
if (props.scrollToActive && firstSelectedIndex.value >= 0 && contentRef.el) {
|
||||
const selectedElement = contentRef.el.children[lastSelectedIndex.value];
|
||||
scrollToChildren(selectedElement, props.centerActive);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
const isFocused = shallowRef(false);
|
||||
function scrollToChildren(children, center) {
|
||||
let target = 0;
|
||||
if (center) {
|
||||
target = calculateCenteredTarget({
|
||||
containerElement: containerRef.el,
|
||||
isHorizontal: isHorizontal.value,
|
||||
selectedElement: children
|
||||
});
|
||||
} else {
|
||||
target = calculateUpdatedTarget({
|
||||
containerElement: containerRef.el,
|
||||
isHorizontal: isHorizontal.value,
|
||||
isRtl: isRtl.value,
|
||||
selectedElement: children
|
||||
});
|
||||
}
|
||||
scrollToPosition(target);
|
||||
}
|
||||
function scrollToPosition(newPosition) {
|
||||
if (!IN_BROWSER || !containerRef.el) return;
|
||||
const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el);
|
||||
const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el);
|
||||
const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
|
||||
if (scrollSize <= offsetSize || // Prevent scrolling by only a couple of pixels, which doesn't look smooth
|
||||
Math.abs(newPosition - scrollPosition) < 16) return;
|
||||
if (isHorizontal.value && isRtl.value && containerRef.el) {
|
||||
const {
|
||||
scrollWidth,
|
||||
offsetWidth: containerWidth
|
||||
} = containerRef.el;
|
||||
newPosition = scrollWidth - containerWidth - newPosition;
|
||||
}
|
||||
if (isHorizontal.value) {
|
||||
goTo.horizontal(newPosition, goToOptions.value);
|
||||
} else {
|
||||
goTo(newPosition, goToOptions.value);
|
||||
}
|
||||
}
|
||||
function onScroll(e) {
|
||||
const {
|
||||
scrollTop,
|
||||
scrollLeft
|
||||
} = e.target;
|
||||
scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop;
|
||||
}
|
||||
function onFocusin(e) {
|
||||
isFocused.value = true;
|
||||
if (!isOverflowing.value || !contentRef.el) return;
|
||||
for (const el of e.composedPath()) {
|
||||
for (const item of contentRef.el.children) {
|
||||
if (item === el) {
|
||||
scrollToChildren(item);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function onFocusout(e) {
|
||||
isFocused.value = false;
|
||||
}
|
||||
let ignoreFocusEvent = false;
|
||||
function onFocus(e) {
|
||||
if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget))) focus();
|
||||
ignoreFocusEvent = false;
|
||||
}
|
||||
function onFocusAffixes() {
|
||||
ignoreFocusEvent = true;
|
||||
}
|
||||
function onKeydown(e) {
|
||||
if (!contentRef.el) return;
|
||||
function toFocus(location) {
|
||||
e.preventDefault();
|
||||
focus(location);
|
||||
}
|
||||
if (isHorizontal.value) {
|
||||
if (e.key === "ArrowRight") {
|
||||
toFocus(isRtl.value ? "prev" : "next");
|
||||
} else if (e.key === "ArrowLeft") {
|
||||
toFocus(isRtl.value ? "next" : "prev");
|
||||
}
|
||||
} else {
|
||||
if (e.key === "ArrowDown") {
|
||||
toFocus("next");
|
||||
} else if (e.key === "ArrowUp") {
|
||||
toFocus("prev");
|
||||
}
|
||||
}
|
||||
if (e.key === "Home") {
|
||||
toFocus("first");
|
||||
} else if (e.key === "End") {
|
||||
toFocus("last");
|
||||
}
|
||||
}
|
||||
function getSiblingElement(el, location) {
|
||||
if (!el) return void 0;
|
||||
let sibling = el;
|
||||
do {
|
||||
sibling = sibling?.[location === "next" ? "nextElementSibling" : "previousElementSibling"];
|
||||
} while (sibling?.hasAttribute("disabled"));
|
||||
return sibling;
|
||||
}
|
||||
function focus(location) {
|
||||
if (!contentRef.el) return;
|
||||
let el;
|
||||
if (!location) {
|
||||
const focusable = focusableChildren(contentRef.el);
|
||||
el = focusable[0];
|
||||
} else if (location === "next") {
|
||||
el = getSiblingElement(contentRef.el.querySelector(":focus"), location);
|
||||
if (!el) return focus("first");
|
||||
} else if (location === "prev") {
|
||||
el = getSiblingElement(contentRef.el.querySelector(":focus"), location);
|
||||
if (!el) return focus("last");
|
||||
} else if (location === "first") {
|
||||
el = contentRef.el.firstElementChild;
|
||||
if (el?.hasAttribute("disabled")) el = getSiblingElement(el, "next");
|
||||
} else if (location === "last") {
|
||||
el = contentRef.el.lastElementChild;
|
||||
if (el?.hasAttribute("disabled")) el = getSiblingElement(el, "prev");
|
||||
}
|
||||
if (el) {
|
||||
el.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
}
|
||||
}
|
||||
function scrollTo(location) {
|
||||
const direction = isHorizontal.value && isRtl.value ? -1 : 1;
|
||||
const offsetStep = (location === "prev" ? -direction : direction) * containerSize.value;
|
||||
let newPosition = scrollOffset.value + offsetStep;
|
||||
if (isHorizontal.value && isRtl.value && containerRef.el) {
|
||||
const {
|
||||
scrollWidth,
|
||||
offsetWidth: containerWidth
|
||||
} = containerRef.el;
|
||||
newPosition += scrollWidth - containerWidth;
|
||||
}
|
||||
scrollToPosition(newPosition);
|
||||
}
|
||||
const slotProps = computed(() => ({
|
||||
next: group.next,
|
||||
prev: group.prev,
|
||||
select: group.select,
|
||||
isSelected: group.isSelected
|
||||
}));
|
||||
const hasOverflowOrScroll = computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0);
|
||||
const hasAffixes = computed(() => {
|
||||
switch (props.showArrows) {
|
||||
case "never":
|
||||
return false;
|
||||
// Always show arrows on desktop & mobile
|
||||
case "always":
|
||||
return true;
|
||||
// Always show arrows on desktop
|
||||
case "desktop":
|
||||
return !mobile.value;
|
||||
// Show arrows on mobile when overflowing.
|
||||
// This matches the default 2.2 behavior
|
||||
case true:
|
||||
return hasOverflowOrScroll.value;
|
||||
// Always show on mobile
|
||||
case "mobile":
|
||||
return mobile.value || hasOverflowOrScroll.value;
|
||||
// https://material.io/components/tabs#scrollable-tabs
|
||||
// Always show arrows when
|
||||
// overflowed on desktop
|
||||
default:
|
||||
return !mobile.value && hasOverflowOrScroll.value;
|
||||
}
|
||||
});
|
||||
const hasPrev = computed(() => {
|
||||
return Math.abs(scrollOffset.value) > 1;
|
||||
});
|
||||
const hasNext = computed(() => {
|
||||
if (!containerRef.value || !hasOverflowOrScroll.value) return false;
|
||||
const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
|
||||
const clientSize = getClientSize(isHorizontal.value, containerRef.el);
|
||||
const scrollSizeMax = scrollSize - clientSize;
|
||||
return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
|
||||
});
|
||||
useRender(() => createVNode(props.tag, {
|
||||
"class": normalizeClass(["v-slide-group", {
|
||||
"v-slide-group--vertical": !isHorizontal.value,
|
||||
"v-slide-group--has-affixes": hasAffixes.value,
|
||||
"v-slide-group--is-overflowing": isOverflowing.value
|
||||
}, displayClasses.value, props.class]),
|
||||
"style": normalizeStyle(props.style),
|
||||
"tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
|
||||
"onFocus": onFocus
|
||||
}, {
|
||||
default: () => [hasAffixes.value && createBaseVNode("div", {
|
||||
"key": "prev",
|
||||
"class": normalizeClass(["v-slide-group__prev", {
|
||||
"v-slide-group__prev--disabled": !hasPrev.value
|
||||
}]),
|
||||
"onMousedown": onFocusAffixes,
|
||||
"onClick": () => hasPrev.value && scrollTo("prev")
|
||||
}, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
|
||||
default: () => [createVNode(VIcon, {
|
||||
"icon": isRtl.value ? props.nextIcon : props.prevIcon
|
||||
}, null)]
|
||||
})]), createBaseVNode("div", {
|
||||
"key": "container",
|
||||
"ref": containerRef,
|
||||
"class": normalizeClass(["v-slide-group__container", props.contentClass]),
|
||||
"onScroll": onScroll
|
||||
}, [createBaseVNode("div", {
|
||||
"ref": contentRef,
|
||||
"class": "v-slide-group__content",
|
||||
"onFocusin": onFocusin,
|
||||
"onFocusout": onFocusout,
|
||||
"onKeydown": onKeydown
|
||||
}, [slots.default?.(slotProps.value)])]), hasAffixes.value && createBaseVNode("div", {
|
||||
"key": "next",
|
||||
"class": normalizeClass(["v-slide-group__next", {
|
||||
"v-slide-group__next--disabled": !hasNext.value
|
||||
}]),
|
||||
"onMousedown": onFocusAffixes,
|
||||
"onClick": () => hasNext.value && scrollTo("next")
|
||||
}, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
|
||||
default: () => [createVNode(VIcon, {
|
||||
"icon": isRtl.value ? props.prevIcon : props.nextIcon
|
||||
}, null)]
|
||||
})])]
|
||||
}));
|
||||
return {
|
||||
selected: group.selected,
|
||||
scrollTo,
|
||||
scrollOffset,
|
||||
focus,
|
||||
hasPrev,
|
||||
hasNext
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// node_modules/vuetify/lib/components/VChipGroup/VChipGroup.js
|
||||
var VChipGroupSymbol = /* @__PURE__ */ Symbol.for("vuetify:v-chip-group");
|
||||
var makeVChipGroupProps = propsFactory({
|
||||
baseColor: String,
|
||||
column: Boolean,
|
||||
filter: Boolean,
|
||||
valueComparator: {
|
||||
type: Function,
|
||||
default: deepEqual
|
||||
},
|
||||
...makeVSlideGroupProps({
|
||||
scrollToActive: false
|
||||
}),
|
||||
...makeComponentProps(),
|
||||
...makeGroupProps({
|
||||
selectedClass: "v-chip--selected"
|
||||
}),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: "tonal"
|
||||
})
|
||||
}, "VChipGroup");
|
||||
var VChipGroup = genericComponent()({
|
||||
name: "VChipGroup",
|
||||
props: makeVChipGroupProps(),
|
||||
emits: {
|
||||
"update:modelValue": (value) => true
|
||||
},
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
isSelected,
|
||||
select,
|
||||
next,
|
||||
prev,
|
||||
selected
|
||||
} = useGroup(props, VChipGroupSymbol);
|
||||
provideDefaults({
|
||||
VChip: {
|
||||
baseColor: toRef(() => props.baseColor),
|
||||
color: toRef(() => props.color),
|
||||
disabled: toRef(() => props.disabled),
|
||||
filter: toRef(() => props.filter),
|
||||
variant: toRef(() => props.variant)
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const slideGroupProps = VSlideGroup.filterProps(props);
|
||||
return createVNode(VSlideGroup, mergeProps(slideGroupProps, {
|
||||
"class": ["v-chip-group", {
|
||||
"v-chip-group--column": props.column
|
||||
}, themeClasses.value, props.class],
|
||||
"style": props.style
|
||||
}), {
|
||||
default: () => [slots.default?.({
|
||||
isSelected,
|
||||
select,
|
||||
next,
|
||||
prev,
|
||||
selected: selected.value
|
||||
})]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
|
||||
// node_modules/vuetify/lib/components/VChip/VChip.js
|
||||
var makeVChipProps = propsFactory({
|
||||
activeClass: String,
|
||||
appendAvatar: String,
|
||||
appendIcon: IconValue,
|
||||
baseColor: String,
|
||||
closable: Boolean,
|
||||
closeIcon: {
|
||||
type: IconValue,
|
||||
default: "$delete"
|
||||
},
|
||||
closeLabel: {
|
||||
type: String,
|
||||
default: "$vuetify.close"
|
||||
},
|
||||
draggable: Boolean,
|
||||
filter: Boolean,
|
||||
filterIcon: {
|
||||
type: IconValue,
|
||||
default: "$complete"
|
||||
},
|
||||
label: Boolean,
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
pill: Boolean,
|
||||
prependAvatar: String,
|
||||
prependIcon: IconValue,
|
||||
ripple: {
|
||||
type: [Boolean, Object],
|
||||
default: true
|
||||
},
|
||||
text: {
|
||||
type: [String, Number, Boolean],
|
||||
default: void 0
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onClick: EventProp(),
|
||||
onClickOnce: EventProp(),
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeElevationProps(),
|
||||
...makeGroupItemProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeRouterProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps({
|
||||
tag: "span"
|
||||
}),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: "tonal"
|
||||
})
|
||||
}, "VChip");
|
||||
var VChip = genericComponent()({
|
||||
name: "VChip",
|
||||
directives: {
|
||||
vRipple: ripple_default
|
||||
},
|
||||
props: makeVChipProps(),
|
||||
emits: {
|
||||
"click:close": (e) => true,
|
||||
"update:modelValue": (value) => true,
|
||||
"group:selected": (val) => true,
|
||||
click: (e) => true
|
||||
},
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
} = _ref;
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
sizeClasses
|
||||
} = useSize(props);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const isActive = useProxiedModel(props, "modelValue");
|
||||
const group = useGroupItem(props, VChipGroupSymbol, false);
|
||||
const slideGroup = useGroupItem(props, VSlideGroupSymbol, false);
|
||||
const link = useLink(props, attrs);
|
||||
const isLink = toRef(() => props.link !== false && link.isLink.value);
|
||||
const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
|
||||
const closeProps = toRef(() => ({
|
||||
"aria-label": t(props.closeLabel),
|
||||
disabled: props.disabled,
|
||||
onClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isActive.value = false;
|
||||
emit("click:close", e);
|
||||
}
|
||||
}));
|
||||
watch(isActive, (val) => {
|
||||
if (val) {
|
||||
group?.register();
|
||||
slideGroup?.register();
|
||||
} else {
|
||||
group?.unregister();
|
||||
slideGroup?.unregister();
|
||||
}
|
||||
});
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(() => {
|
||||
const showColor = !group || group.isSelected.value;
|
||||
return {
|
||||
color: showColor ? props.color ?? props.baseColor : props.baseColor,
|
||||
variant: props.variant
|
||||
};
|
||||
});
|
||||
function onClick(e) {
|
||||
emit("click", e);
|
||||
if (!isClickable.value) return;
|
||||
link.navigate?.(e);
|
||||
group?.toggle();
|
||||
}
|
||||
function onKeyDown(e) {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
const Tag = link.isLink.value ? "a" : props.tag;
|
||||
const hasAppendMedia = !!(props.appendIcon || props.appendAvatar);
|
||||
const hasAppend = !!(hasAppendMedia || slots.append);
|
||||
const hasClose = !!(slots.close || props.closable);
|
||||
const hasFilter = !!(slots.filter || props.filter) && group;
|
||||
const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
|
||||
const hasPrepend = !!(hasPrependMedia || slots.prepend);
|
||||
return isActive.value && withDirectives(createVNode(Tag, mergeProps(link.linkProps, {
|
||||
"class": ["v-chip", {
|
||||
"v-chip--disabled": props.disabled,
|
||||
"v-chip--label": props.label,
|
||||
"v-chip--link": isClickable.value,
|
||||
"v-chip--filter": hasFilter,
|
||||
"v-chip--pill": props.pill,
|
||||
[`${props.activeClass}`]: props.activeClass && link.isActive?.value
|
||||
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
|
||||
"style": [colorStyles.value, props.style],
|
||||
"disabled": props.disabled || void 0,
|
||||
"draggable": props.draggable,
|
||||
"tabindex": isClickable.value ? 0 : void 0,
|
||||
"onClick": onClick,
|
||||
"onKeydown": isClickable.value && !isLink.value && onKeyDown
|
||||
}), {
|
||||
default: () => [genOverlays(isClickable.value, "v-chip"), hasFilter && createVNode(VExpandXTransition, {
|
||||
"key": "filter"
|
||||
}, {
|
||||
default: () => [withDirectives(createBaseVNode("div", {
|
||||
"class": "v-chip__filter"
|
||||
}, [!slots.filter ? createVNode(VIcon, {
|
||||
"key": "filter-icon",
|
||||
"icon": props.filterIcon
|
||||
}, null) : createVNode(VDefaultsProvider, {
|
||||
"key": "filter-defaults",
|
||||
"disabled": !props.filterIcon,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: props.filterIcon
|
||||
}
|
||||
}
|
||||
}, slots.filter)]), [[vShow, group.isSelected.value]])]
|
||||
}), hasPrepend && createBaseVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-chip__prepend"
|
||||
}, [!slots.prepend ? createBaseVNode(Fragment, null, [props.prependIcon && createVNode(VIcon, {
|
||||
"key": "prepend-icon",
|
||||
"icon": props.prependIcon,
|
||||
"start": true
|
||||
}, null), props.prependAvatar && createVNode(VAvatar, {
|
||||
"key": "prepend-avatar",
|
||||
"image": props.prependAvatar,
|
||||
"start": true
|
||||
}, null)]) : createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"disabled": !hasPrependMedia,
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
image: props.prependAvatar,
|
||||
start: true
|
||||
},
|
||||
VIcon: {
|
||||
icon: props.prependIcon,
|
||||
start: true
|
||||
}
|
||||
}
|
||||
}, slots.prepend)]), createBaseVNode("div", {
|
||||
"class": "v-chip__content",
|
||||
"data-no-activator": ""
|
||||
}, [slots.default?.({
|
||||
isSelected: group?.isSelected.value,
|
||||
selectedClass: group?.selectedClass.value,
|
||||
select: group?.select,
|
||||
toggle: group?.toggle,
|
||||
value: group?.value.value,
|
||||
disabled: props.disabled
|
||||
}) ?? toDisplayString(props.text)]), hasAppend && createBaseVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-chip__append"
|
||||
}, [!slots.append ? createBaseVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
|
||||
"key": "append-icon",
|
||||
"end": true,
|
||||
"icon": props.appendIcon
|
||||
}, null), props.appendAvatar && createVNode(VAvatar, {
|
||||
"key": "append-avatar",
|
||||
"end": true,
|
||||
"image": props.appendAvatar
|
||||
}, null)]) : createVNode(VDefaultsProvider, {
|
||||
"key": "append-defaults",
|
||||
"disabled": !hasAppendMedia,
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
end: true,
|
||||
image: props.appendAvatar
|
||||
},
|
||||
VIcon: {
|
||||
end: true,
|
||||
icon: props.appendIcon
|
||||
}
|
||||
}
|
||||
}, slots.append)]), hasClose && createBaseVNode("button", mergeProps({
|
||||
"key": "close",
|
||||
"class": "v-chip__close",
|
||||
"type": "button",
|
||||
"data-testid": "close-chip"
|
||||
}, closeProps.value), [!slots.close ? createVNode(VIcon, {
|
||||
"key": "close-icon",
|
||||
"icon": props.closeIcon,
|
||||
"size": "x-small"
|
||||
}, null) : createVNode(VDefaultsProvider, {
|
||||
"key": "close-defaults",
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: props.closeIcon,
|
||||
size: "x-small"
|
||||
}
|
||||
}
|
||||
}, slots.close)])]
|
||||
}), [[ripple_default, isClickable.value && props.ripple, null]]);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export {
|
||||
VSlideGroupSymbol,
|
||||
makeVSlideGroupProps,
|
||||
VSlideGroup,
|
||||
VChipGroup,
|
||||
VChip
|
||||
};
|
||||
//# sourceMappingURL=chunk-PLNIG6WP.js.map
|
||||
Reference in New Issue
Block a user