866 lines
26 KiB
JavaScript
866 lines
26 KiB
JavaScript
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
|