vuetify
Version:
Vue Material Component Framework
246 lines (243 loc) • 8.3 kB
JavaScript
import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
/* eslint-disable complexity */
// Styles
import "./VChip.css";
// Components
import { VAvatar } from "../VAvatar/index.mjs";
import { VChipGroupSymbol } from "../VChipGroup/VChipGroup.mjs";
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
import { VExpandXTransition } from "../transitions/index.mjs";
import { VIcon } from "../VIcon/index.mjs"; // Composables
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
import { makeBorderProps, useBorder } from "../../composables/border.mjs";
import { makeDensityProps, useDensity } from "../../composables/density.mjs";
import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
import { makeRouterProps, useLink } from "../../composables/router.mjs";
import { makeSizeProps, useSize } from "../../composables/size.mjs";
import { makeTagProps } from "../../composables/tag.mjs";
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { IconValue } from "../../composables/icons.mjs";
import { useLocale } from "../../composables/locale.mjs"; // Directives
import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
import { EventProp, genericComponent } from "../../util/index.mjs";
import { computed } from 'vue';
// Types
export const VChip = genericComponent()({
name: 'VChip',
directives: {
Ripple
},
props: {
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: String,
default: '$complete'
},
label: Boolean,
link: {
type: Boolean,
default: undefined
},
pill: Boolean,
prependAvatar: String,
prependIcon: IconValue,
ripple: {
type: Boolean,
default: true
},
text: String,
modelValue: {
type: Boolean,
default: true
},
onClick: EventProp,
onClickOnce: EventProp,
...makeBorderProps(),
...makeDensityProps(),
...makeElevationProps(),
...makeGroupItemProps(),
...makeRoundedProps(),
...makeRouterProps(),
...makeSizeProps(),
...makeTagProps({
tag: 'span'
}),
...makeThemeProps(),
...makeVariantProps({
variant: 'tonal'
})
},
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));
function onCloseClick(e) {
isActive.value = false;
emit('click:close', e);
}
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 hasAppend = !!(slots.append || props.appendIcon || props.appendAvatar);
const hasClose = !!(slots.close || props.closable);
const hasFilter = !!(slots.filter || props.filter) && group;
const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar);
const hasColor = !group || group.isSelected.value;
return isActive.value && _withDirectives(_createVNode(Tag, {
"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
}, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value],
"style": [hasColor ? colorStyles.value : undefined],
"disabled": props.disabled || undefined,
"draggable": props.draggable,
"href": link.href.value,
"tabindex": isClickable.value ? 0 : undefined,
"onClick": onClick,
"onKeydown": isClickable.value && !isLink.value && onKeyDown
}, {
default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && _createVNode(VDefaultsProvider, {
"key": "filter",
"defaults": {
VIcon: {
icon: props.filterIcon
}
}
}, {
default: () => [_createVNode(VExpandXTransition, null, {
default: () => [_withDirectives(_createVNode("div", {
"class": "v-chip__filter"
}, [slots.filter ? slots.filter() : _createVNode(VIcon, null, null)]), [[_vShow, group.isSelected.value]])]
})]
}), hasPrepend && _createVNode(VDefaultsProvider, {
"key": "prepend",
"defaults": {
VAvatar: {
image: props.prependAvatar
},
VIcon: {
icon: props.prependIcon
}
}
}, {
default: () => [slots.prepend ? _createVNode("div", {
"class": "v-chip__prepend"
}, [slots.prepend()]) : props.prependAvatar ? _createVNode(VAvatar, {
"start": true
}, null) : props.prependIcon ? _createVNode(VIcon, {
"start": true
}, null) : undefined]
}), slots.default?.({
isSelected: group?.isSelected.value,
selectedClass: group?.selectedClass.value,
select: group?.select,
toggle: group?.toggle,
value: group?.value.value,
disabled: props.disabled
}) ?? props.text, hasAppend && _createVNode(VDefaultsProvider, {
"key": "append",
"defaults": {
VAvatar: {
image: props.appendAvatar
},
VIcon: {
icon: props.appendIcon
}
}
}, {
default: () => [slots.append ? _createVNode("div", {
"class": "v-chip__append"
}, [slots.append()]) : props.appendAvatar ? _createVNode(VAvatar, {
"end": true
}, null) : props.appendIcon ? _createVNode(VIcon, {
"end": true
}, null) : undefined]
}), hasClose && _createVNode(VDefaultsProvider, {
"key": "close",
"defaults": {
VIcon: {
icon: props.closeIcon,
size: 'x-small'
}
}
}, {
default: () => [_createVNode("div", {
"class": "v-chip__close",
"aria-label": t(props.closeLabel),
"onClick": onCloseClick
}, [slots.close ? slots.close() : _createVNode(VIcon, null, null)])]
})]
}), [[_resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
};
}
});
//# sourceMappingURL=VChip.mjs.map