This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/node_modulesOLD/vuetify/lib/components/VChip/VChip.js
2019-08-11 20:48:02 +02:00

164 lines
No EOL
4.1 KiB
JavaScript

// Styles
import "../../../src/components/VChip/VChip.sass";
import mixins from '../../util/mixins'; // Components
import { VExpandXTransition } from '../transitions';
import VIcon from '../VIcon'; // Mixins
import Colorable from '../../mixins/colorable';
import { factory as GroupableFactory } from '../../mixins/groupable';
import Themeable from '../../mixins/themeable';
import { factory as ToggleableFactory } from '../../mixins/toggleable';
import Routable from '../../mixins/routable';
import Sizeable from '../../mixins/sizeable'; // Utilities
import { breaking } from '../../util/console';
/* @vue/component */
export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory('chipGroup'), ToggleableFactory('inputValue')).extend({
name: 'v-chip',
props: {
active: {
type: Boolean,
default: true
},
activeClass: {
type: String,
default() {
if (!this.chipGroup) return '';
return this.chipGroup.activeClass;
}
},
close: Boolean,
closeIcon: {
type: String,
default: '$vuetify.icons.delete'
},
disabled: Boolean,
draggable: Boolean,
filter: Boolean,
filterIcon: {
type: String,
default: '$vuetify.icons.complete'
},
label: Boolean,
link: Boolean,
outlined: Boolean,
pill: Boolean,
tag: {
type: String,
default: 'span'
},
textColor: String,
value: null
},
data: () => ({
proxyClass: 'v-chip--active'
}),
computed: {
classes() {
return {
'v-chip': true,
...Routable.options.computed.classes.call(this),
'v-chip--clickable': this.isClickable,
'v-chip--disabled': this.disabled,
'v-chip--draggable': this.draggable,
'v-chip--label': this.label,
'v-chip--link': this.isLink,
'v-chip--no-color': !this.color,
'v-chip--outlined': this.outlined,
'v-chip--pill': this.pill,
'v-chip--removable': this.hasClose,
...this.themeClasses,
...this.sizeableClasses,
...this.groupClasses
};
},
hasClose() {
return Boolean(this.close);
},
isClickable() {
return Boolean(Routable.options.computed.isClickable.call(this) || this.chipGroup);
}
},
created() {
const breakingProps = [['outline', 'outlined'], ['selected', 'input-value'], ['value', 'active'], ['@input', '@active.sync']];
/* istanbul ignore next */
breakingProps.forEach(([original, replacement]) => {
if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
});
},
methods: {
click(e) {
this.$emit('click', e);
this.chipGroup && this.toggle();
},
genFilter() {
const children = [];
if (this.isActive) {
children.push(this.$createElement(VIcon, {
staticClass: 'v-chip__filter',
props: {
left: true
}
}, this.filterIcon));
}
return this.$createElement(VExpandXTransition, children);
},
genClose() {
return this.$createElement(VIcon, {
staticClass: 'v-chip__close',
props: {
right: true
},
on: {
click: e => {
e.stopPropagation();
this.$emit('click:close');
this.$emit('update:active', false);
}
}
}, this.closeIcon);
},
genContent() {
return this.$createElement('span', {
staticClass: 'v-chip__content'
}, [this.filter && this.genFilter(), this.$slots.default, this.hasClose && this.genClose()]);
}
},
render(h) {
const children = [this.genContent()];
let {
tag,
data
} = this.generateRouteLink();
data.attrs = { ...data.attrs,
draggable: this.draggable ? 'true' : undefined,
tabindex: this.chipGroup && !this.disabled ? 0 : data.attrs.tabindex
};
data.directives.push({
name: 'show',
value: this.active
});
data = this.setBackgroundColor(this.color, data);
const color = this.textColor || this.outlined && this.color;
return h(tag, this.setTextColor(color, data), children);
}
});
//# sourceMappingURL=VChip.js.map