import { computed, withDirectives, createVNode, mergeProps, vShow, Fragment, resolveDirective, toRef } from 'vue'; import { a as VExpandXTransition } from './index-BNHdF426.mjs'; import { m as makeVSlideGroupProps, d as VSlideGroup } from './VTabs-BaH4QY_R.mjs'; import { g as genericComponent, p as propsFactory, af as Ripple, l as useLocale, ag as useBorder, ah as useVariant, ai as useDensity, aj as useElevation, ak as useRounded, al as useSize, F as provideTheme, n as useProxiedModel, am as useGroupItem, an as useLink, ao as genOverlays, s as VIcon, y as VDefaultsProvider, v as VAvatar, J as makeVariantProps, K as makeThemeProps, L as makeTagProps, M as makeSizeProps, ap as makeRouterProps, N as makeRoundedProps, aq as makeGroupItemProps, O as makeElevationProps, P as makeDensityProps, m as makeComponentProps, Q as makeBorderProps, a2 as EventProp, I as IconValue, ad as makeGroupProps, U as deepEqual, ae as useGroup, G as provideDefaults, a as useRender } from './server.mjs'; const VChipGroupSymbol = Symbol.for("vuetify:v-chip-group"); const makeVChipGroupProps = propsFactory({ column: Boolean, filter: Boolean, valueComparator: { type: Function, default: deepEqual }, ...makeVSlideGroupProps(), ...makeComponentProps(), ...makeGroupProps({ selectedClass: "v-chip--selected" }), ...makeTagProps(), ...makeThemeProps(), ...makeVariantProps({ variant: "tonal" }) }, "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: { 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: () => { var _a; return [(_a = slots.default) == null ? void 0 : _a.call(slots, { isSelected, select, next, prev, selected: selected.value })]; } }); }); return {}; } }); const makeVChipProps = propsFactory({ activeClass: String, appendAvatar: String, appendIcon: IconValue, 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: String, 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"); const VChip = genericComponent()({ name: "VChip", directives: { Ripple }, 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 { colorClasses, colorStyles, variantClasses } = useVariant(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 link = useLink(props, attrs); const isLink = computed(() => props.link !== false && link.isLink.value); const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value)); const closeProps = computed(() => ({ "aria-label": t(props.closeLabel), onClick(e) { e.preventDefault(); e.stopPropagation(); isActive.value = false; emit("click:close", e); } })); function onClick(e) { var _a; emit("click", e); if (!isClickable.value) return; (_a = link.navigate) == null ? void 0 : _a.call(link, e); group == null ? void 0 : group.toggle(); } function onKeyDown(e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } } return () => { var _a; 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); const hasColor = !group || group.isSelected.value; return isActive.value && withDirectives(createVNode(Tag, mergeProps({ "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 && ((_a = link.isActive) == null ? void 0 : _a.value) }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : void 0, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group == null ? void 0 : group.selectedClass.value, props.class], "style": [hasColor ? colorStyles.value : void 0, props.style], "disabled": props.disabled || void 0, "draggable": props.draggable, "tabindex": isClickable.value ? 0 : void 0, "onClick": onClick, "onKeydown": isClickable.value && !isLink.value && onKeyDown }, link.linkProps), { default: () => { var _a3; var _a2; return [genOverlays(isClickable.value, "v-chip"), hasFilter && createVNode(VExpandXTransition, { "key": "filter" }, { default: () => [withDirectives(createVNode("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 && createVNode("div", { "key": "prepend", "class": "v-chip__prepend" }, [!slots.prepend ? createVNode(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)]), createVNode("div", { "class": "v-chip__content", "data-no-activator": "" }, [(_a3 = (_a2 = slots.default) == null ? void 0 : _a2.call(slots, { isSelected: group == null ? void 0 : group.isSelected.value, selectedClass: group == null ? void 0 : group.selectedClass.value, select: group == null ? void 0 : group.select, toggle: group == null ? void 0 : group.toggle, value: group == null ? void 0 : group.value.value, disabled: props.disabled })) != null ? _a3 : props.text]), hasAppend && createVNode("div", { "key": "append", "class": "v-chip__append" }, [!slots.append ? createVNode(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 && createVNode("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)])]; } }), [[resolveDirective("ripple"), isClickable.value && props.ripple, null]]); }; } }); export { VChip as V };