123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247 |
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
- // Styles
- import '../../../src/stylus/components/_inputs.styl';
- // Components
- import VIcon from '../VIcon';
- import VLabel from '../VLabel';
- import VMessages from '../VMessages';
- // Mixins
- import Colorable from '../../mixins/colorable';
- import Themeable from '../../mixins/themeable';
- import Validatable from '../../mixins/validatable';
- // Utilities
- import { convertToUnit, kebabCase } from '../../util/helpers';
- import { deprecate } from '../../util/console';
- import mixins from '../../util/mixins';
- export default mixins(Colorable, Themeable, Validatable
- /* @vue/component */
- ).extend({
- name: 'v-input',
- props: {
- appendIcon: String,
- /** @deprecated */
- appendIconCb: Function,
- backgroundColor: {
- type: String,
- default: ''
- },
- height: [Number, String],
- hideDetails: Boolean,
- hint: String,
- label: String,
- loading: Boolean,
- persistentHint: Boolean,
- prependIcon: String,
- /** @deprecated */
- prependIconCb: Function,
- value: { required: false }
- },
- data: function data() {
- return {
- attrsInput: {},
- lazyValue: this.value,
- hasMouseDown: false
- };
- },
-
- computed: {
- classes: function classes() {
- return {};
- },
- classesInput: function classesInput() {
- return _extends({}, this.classes, {
- 'v-input--has-state': this.hasState,
- 'v-input--hide-details': this.hideDetails,
- 'v-input--is-label-active': this.isLabelActive,
- 'v-input--is-dirty': this.isDirty,
- 'v-input--is-disabled': this.disabled,
- 'v-input--is-focused': this.isFocused,
- 'v-input--is-loading': this.loading !== false && this.loading !== undefined,
- 'v-input--is-readonly': this.readonly
- }, this.themeClasses);
- },
- directivesInput: function directivesInput() {
- return [];
- },
- hasHint: function hasHint() {
- return !this.hasMessages && this.hint && (this.persistentHint || this.isFocused);
- },
- hasLabel: function hasLabel() {
- return Boolean(this.$slots.label || this.label);
- },
-
- // Proxy for `lazyValue`
- // This allows an input
- // to function without
- // a provided model
- internalValue: {
- get: function get() {
- return this.lazyValue;
- },
- set: function set(val) {
- this.lazyValue = val;
- this.$emit(this.$_modelEvent, val);
- }
- },
- isDirty: function isDirty() {
- return !!this.lazyValue;
- },
- isDisabled: function isDisabled() {
- return Boolean(this.disabled || this.readonly);
- },
- isLabelActive: function isLabelActive() {
- return this.isDirty;
- }
- },
- watch: {
- value: function value(val) {
- this.lazyValue = val;
- }
- },
- beforeCreate: function beforeCreate() {
- // v-radio-group needs to emit a different event
- // https://github.com/vuetifyjs/vuetify/issues/4752
- this.$_modelEvent = this.$options.model && this.$options.model.event || 'input';
- },
-
- methods: {
- genContent: function genContent() {
- return [this.genPrependSlot(), this.genControl(), this.genAppendSlot()];
- },
- genControl: function genControl() {
- return this.$createElement('div', {
- staticClass: 'v-input__control'
- }, [this.genInputSlot(), this.genMessages()]);
- },
- genDefaultSlot: function genDefaultSlot() {
- return [this.genLabel(), this.$slots.default];
- },
-
- // TODO: remove shouldDeprecate (2.0), used for clearIcon
- genIcon: function genIcon(type, cb) {
- var _this = this;
-
- var shouldDeprecate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
- var icon = this[type + 'Icon'];
- var eventName = 'click:' + kebabCase(type);
- cb = cb || this[type + 'IconCb'];
- if (shouldDeprecate && type && cb) {
- deprecate(':' + type + '-icon-cb', '@' + eventName, this);
- }
- var data = {
- props: {
- color: this.validationState,
- dark: this.dark,
- disabled: this.disabled,
- light: this.light
- },
- on: !(this.$listeners[eventName] || cb) ? undefined : {
- click: function click(e) {
- e.preventDefault();
- e.stopPropagation();
- _this.$emit(eventName, e);
- cb && cb(e);
- },
- // Container has mouseup event that will
- // trigger menu open if enclosed
- mouseup: function mouseup(e) {
- e.preventDefault();
- e.stopPropagation();
- }
- }
- };
- return this.$createElement('div', {
- staticClass: 'v-input__icon v-input__icon--' + kebabCase(type),
- key: '' + type + icon
- }, [this.$createElement(VIcon, data, icon)]);
- },
- genInputSlot: function genInputSlot() {
- return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
- staticClass: 'v-input__slot',
- style: { height: convertToUnit(this.height) },
- directives: this.directivesInput,
- on: {
- click: this.onClick,
- mousedown: this.onMouseDown,
- mouseup: this.onMouseUp
- },
- ref: 'input-slot'
- }), [this.genDefaultSlot()]);
- },
- genLabel: function genLabel() {
- if (!this.hasLabel) return null;
- return this.$createElement(VLabel, {
- props: {
- color: this.validationState,
- dark: this.dark,
- focused: this.hasState,
- for: this.$attrs.id,
- light: this.light
- }
- }, this.$slots.label || this.label);
- },
- genMessages: function genMessages() {
- if (this.hideDetails) return null;
- var messages = this.hasHint ? [this.hint] : this.validations;
- return this.$createElement(VMessages, {
- props: {
- color: this.hasHint ? '' : this.validationState,
- dark: this.dark,
- light: this.light,
- value: this.hasMessages || this.hasHint ? messages : []
- }
- });
- },
- genSlot: function genSlot(type, location, slot) {
- if (!slot.length) return null;
- var ref = type + '-' + location;
- return this.$createElement('div', {
- staticClass: 'v-input__' + ref,
- ref: ref
- }, slot);
- },
- genPrependSlot: function genPrependSlot() {
- var slot = [];
- if (this.$slots.prepend) {
- slot.push(this.$slots.prepend);
- } else if (this.prependIcon) {
- slot.push(this.genIcon('prepend'));
- }
- return this.genSlot('prepend', 'outer', slot);
- },
- genAppendSlot: function genAppendSlot() {
- var slot = [];
- // Append icon for text field was really
- // an appended inner icon, v-text-field
- // will overwrite this method in order to obtain
- // backwards compat
- if (this.$slots.append) {
- slot.push(this.$slots.append);
- } else if (this.appendIcon) {
- slot.push(this.genIcon('append'));
- }
- return this.genSlot('append', 'outer', slot);
- },
- onClick: function onClick(e) {
- this.$emit('click', e);
- },
- onMouseDown: function onMouseDown(e) {
- this.hasMouseDown = true;
- this.$emit('mousedown', e);
- },
- onMouseUp: function onMouseUp(e) {
- this.hasMouseDown = false;
- this.$emit('mouseup', e);
- }
- },
- render: function render(h) {
- return h('div', this.setTextColor(this.validationState, {
- staticClass: 'v-input',
- attrs: this.attrsInput,
- 'class': this.classesInput
- }), this.genContent());
- }
- });
- //# sourceMappingURL=VInput.js.map
|