vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+363
@@ -0,0 +1,363 @@
|
||||
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/_text-fields.styl';
|
||||
// Extensions
|
||||
import VInput from '../VInput';
|
||||
// Components
|
||||
import VCounter from '../VCounter';
|
||||
import VLabel from '../VLabel';
|
||||
// Mixins
|
||||
import Maskable from '../../mixins/maskable';
|
||||
import Loadable from '../../mixins/loadable';
|
||||
// Directives
|
||||
import Ripple from '../../directives/ripple';
|
||||
// Utilities
|
||||
import { keyCodes } from '../../util/helpers';
|
||||
import { deprecate } from '../../util/console';
|
||||
var dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
|
||||
/* @vue/component */
|
||||
export default VInput.extend({
|
||||
name: 'v-text-field',
|
||||
directives: { Ripple: Ripple },
|
||||
mixins: [Maskable, Loadable],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
appendOuterIcon: String,
|
||||
/** @deprecated */
|
||||
appendOuterIconCb: Function,
|
||||
autofocus: Boolean,
|
||||
box: Boolean,
|
||||
browserAutocomplete: String,
|
||||
clearable: Boolean,
|
||||
clearIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.clear'
|
||||
},
|
||||
clearIconCb: Function,
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
counter: [Boolean, Number, String],
|
||||
flat: Boolean,
|
||||
fullWidth: Boolean,
|
||||
label: String,
|
||||
outline: Boolean,
|
||||
placeholder: String,
|
||||
prefix: String,
|
||||
prependInnerIcon: String,
|
||||
/** @deprecated */
|
||||
prependInnerIconCb: Function,
|
||||
reverse: Boolean,
|
||||
singleLine: Boolean,
|
||||
solo: Boolean,
|
||||
soloInverted: Boolean,
|
||||
suffix: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
badInput: false,
|
||||
initialValue: null,
|
||||
internalChange: false,
|
||||
isClearing: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes: function classes() {
|
||||
return {
|
||||
'v-text-field': true,
|
||||
'v-text-field--full-width': this.fullWidth,
|
||||
'v-text-field--prefix': this.prefix,
|
||||
'v-text-field--single-line': this.isSingle,
|
||||
'v-text-field--solo': this.isSolo,
|
||||
'v-text-field--solo-inverted': this.soloInverted,
|
||||
'v-text-field--solo-flat': this.flat,
|
||||
'v-text-field--box': this.box,
|
||||
'v-text-field--enclosed': this.isEnclosed,
|
||||
'v-text-field--reverse': this.reverse,
|
||||
'v-text-field--outline': this.hasOutline,
|
||||
'v-text-field--placeholder': this.placeholder
|
||||
};
|
||||
},
|
||||
counterValue: function counterValue() {
|
||||
return (this.internalValue || '').toString().length;
|
||||
},
|
||||
directivesInput: function directivesInput() {
|
||||
return [];
|
||||
},
|
||||
|
||||
// TODO: Deprecate
|
||||
hasOutline: function hasOutline() {
|
||||
return this.outline || this.textarea;
|
||||
},
|
||||
|
||||
internalValue: {
|
||||
get: function get() {
|
||||
return this.lazyValue;
|
||||
},
|
||||
set: function set(val) {
|
||||
if (this.mask && val !== this.lazyValue) {
|
||||
this.lazyValue = this.unmaskText(this.maskText(this.unmaskText(val)));
|
||||
this.setSelectionRange();
|
||||
} else {
|
||||
this.lazyValue = val;
|
||||
this.$emit('input', this.lazyValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
isDirty: function isDirty() {
|
||||
return this.lazyValue != null && this.lazyValue.toString().length > 0 || this.badInput;
|
||||
},
|
||||
isEnclosed: function isEnclosed() {
|
||||
return this.box || this.isSolo || this.hasOutline || this.fullWidth;
|
||||
},
|
||||
isLabelActive: function isLabelActive() {
|
||||
return this.isDirty || dirtyTypes.includes(this.type);
|
||||
},
|
||||
isSingle: function isSingle() {
|
||||
return this.isSolo || this.singleLine;
|
||||
},
|
||||
isSolo: function isSolo() {
|
||||
return this.solo || this.soloInverted;
|
||||
},
|
||||
labelPosition: function labelPosition() {
|
||||
var offset = this.prefix && !this.labelValue ? this.prefixWidth : 0;
|
||||
return !this.$vuetify.rtl !== !this.reverse ? {
|
||||
left: 'auto',
|
||||
right: offset
|
||||
} : {
|
||||
left: offset,
|
||||
right: 'auto'
|
||||
};
|
||||
},
|
||||
showLabel: function showLabel() {
|
||||
return this.hasLabel && (!this.isSingle || !this.isLabelActive && !this.placeholder && !this.prefixLabel);
|
||||
},
|
||||
labelValue: function labelValue() {
|
||||
return !this.isSingle && Boolean(this.isFocused || this.isLabelActive || this.placeholder || this.prefixLabel);
|
||||
},
|
||||
prefixWidth: function prefixWidth() {
|
||||
if (!this.prefix && !this.$refs.prefix) return;
|
||||
return this.$refs.prefix.offsetWidth;
|
||||
},
|
||||
prefixLabel: function prefixLabel() {
|
||||
return this.prefix && !this.value;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFocused: function isFocused(val) {
|
||||
// Sets validationState from validatable
|
||||
this.hasColor = val;
|
||||
if (val) {
|
||||
this.initialValue = this.lazyValue;
|
||||
} else if (this.initialValue !== this.lazyValue) {
|
||||
this.$emit('change', this.lazyValue);
|
||||
}
|
||||
},
|
||||
value: function value(val) {
|
||||
var _this = this;
|
||||
|
||||
if (this.mask && !this.internalChange) {
|
||||
var masked = this.maskText(this.unmaskText(val));
|
||||
this.lazyValue = this.unmaskText(masked);
|
||||
// Emit when the externally set value was modified internally
|
||||
String(val) !== this.lazyValue && this.$nextTick(function () {
|
||||
_this.$refs.input.value = masked;
|
||||
_this.$emit('input', _this.lazyValue);
|
||||
});
|
||||
} else this.lazyValue = val;
|
||||
}
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.autofocus && this.onFocus();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** @public */
|
||||
focus: function focus() {
|
||||
this.onFocus();
|
||||
},
|
||||
|
||||
/** @public */
|
||||
blur: function blur() {
|
||||
this.$refs.input ? this.$refs.input.blur() : this.onBlur();
|
||||
},
|
||||
clearableCallback: function clearableCallback() {
|
||||
var _this2 = this;
|
||||
|
||||
this.internalValue = null;
|
||||
this.$nextTick(function () {
|
||||
return _this2.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
genAppendSlot: function genAppendSlot() {
|
||||
var slot = [];
|
||||
if (this.$slots['append-outer']) {
|
||||
slot.push(this.$slots['append-outer']);
|
||||
} else if (this.appendOuterIcon) {
|
||||
slot.push(this.genIcon('appendOuter'));
|
||||
}
|
||||
return this.genSlot('append', 'outer', slot);
|
||||
},
|
||||
genPrependInnerSlot: function genPrependInnerSlot() {
|
||||
var slot = [];
|
||||
if (this.$slots['prepend-inner']) {
|
||||
slot.push(this.$slots['prepend-inner']);
|
||||
} else if (this.prependInnerIcon) {
|
||||
slot.push(this.genIcon('prependInner'));
|
||||
}
|
||||
return this.genSlot('prepend', 'inner', slot);
|
||||
},
|
||||
genIconSlot: function genIconSlot() {
|
||||
var slot = [];
|
||||
if (this.$slots['append']) {
|
||||
slot.push(this.$slots['append']);
|
||||
} else if (this.appendIcon) {
|
||||
slot.push(this.genIcon('append'));
|
||||
}
|
||||
return this.genSlot('append', 'inner', slot);
|
||||
},
|
||||
genInputSlot: function genInputSlot() {
|
||||
var input = VInput.options.methods.genInputSlot.call(this);
|
||||
var prepend = this.genPrependInnerSlot();
|
||||
prepend && input.children.unshift(prepend);
|
||||
return input;
|
||||
},
|
||||
genClearIcon: function genClearIcon() {
|
||||
if (!this.clearable) return null;
|
||||
var icon = !this.isDirty ? false : 'clear';
|
||||
if (this.clearIconCb) deprecate(':clear-icon-cb', '@click:clear', this);
|
||||
return this.genSlot('append', 'inner', [this.genIcon(icon, !this.$listeners['click:clear'] && this.clearIconCb || this.clearableCallback, false)]);
|
||||
},
|
||||
genCounter: function genCounter() {
|
||||
if (this.counter === false || this.counter == null) return null;
|
||||
var max = this.counter === true ? this.$attrs.maxlength : this.counter;
|
||||
return this.$createElement(VCounter, {
|
||||
props: {
|
||||
dark: this.dark,
|
||||
light: this.light,
|
||||
max: max,
|
||||
value: this.counterValue
|
||||
}
|
||||
});
|
||||
},
|
||||
genDefaultSlot: function genDefaultSlot() {
|
||||
return [this.genTextFieldSlot(), this.genClearIcon(), this.genIconSlot(), this.genProgress()];
|
||||
},
|
||||
genLabel: function genLabel() {
|
||||
if (!this.showLabel) return null;
|
||||
var data = {
|
||||
props: {
|
||||
absolute: true,
|
||||
color: this.validationState,
|
||||
dark: this.dark,
|
||||
disabled: this.disabled,
|
||||
focused: !this.isSingle && (this.isFocused || !!this.validationState),
|
||||
left: this.labelPosition.left,
|
||||
light: this.light,
|
||||
right: this.labelPosition.right,
|
||||
value: this.labelValue
|
||||
}
|
||||
};
|
||||
if (this.$attrs.id) data.props.for = this.$attrs.id;
|
||||
return this.$createElement(VLabel, data, this.$slots.label || this.label);
|
||||
},
|
||||
genInput: function genInput() {
|
||||
var listeners = Object.assign({}, this.$listeners);
|
||||
delete listeners['change']; // Change should not be bound externally
|
||||
var data = {
|
||||
style: {},
|
||||
domProps: {
|
||||
value: this.maskText(this.lazyValue)
|
||||
},
|
||||
attrs: _extends({
|
||||
'aria-label': (!this.$attrs || !this.$attrs.id) && this.label
|
||||
}, this.$attrs, {
|
||||
autofocus: this.autofocus,
|
||||
disabled: this.disabled,
|
||||
readonly: this.readonly,
|
||||
type: this.type
|
||||
}),
|
||||
on: Object.assign(listeners, {
|
||||
blur: this.onBlur,
|
||||
input: this.onInput,
|
||||
focus: this.onFocus,
|
||||
keydown: this.onKeyDown
|
||||
}),
|
||||
ref: 'input'
|
||||
};
|
||||
if (this.placeholder) data.attrs.placeholder = this.placeholder;
|
||||
if (this.mask) data.attrs.maxlength = this.masked.length;
|
||||
if (this.browserAutocomplete) data.attrs.autocomplete = this.browserAutocomplete;
|
||||
return this.$createElement('input', data);
|
||||
},
|
||||
genMessages: function genMessages() {
|
||||
if (this.hideDetails) return null;
|
||||
return this.$createElement('div', {
|
||||
staticClass: 'v-text-field__details'
|
||||
}, [VInput.options.methods.genMessages.call(this), this.genCounter()]);
|
||||
},
|
||||
genTextFieldSlot: function genTextFieldSlot() {
|
||||
return this.$createElement('div', {
|
||||
staticClass: 'v-text-field__slot'
|
||||
}, [this.genLabel(), this.prefix ? this.genAffix('prefix') : null, this.genInput(), this.suffix ? this.genAffix('suffix') : null]);
|
||||
},
|
||||
genAffix: function genAffix(type) {
|
||||
return this.$createElement('div', {
|
||||
'class': 'v-text-field__' + type,
|
||||
ref: type
|
||||
}, this[type]);
|
||||
},
|
||||
onBlur: function onBlur(e) {
|
||||
this.isFocused = false;
|
||||
// Reset internalChange state
|
||||
// to allow external change
|
||||
// to persist
|
||||
this.internalChange = false;
|
||||
this.$emit('blur', e);
|
||||
},
|
||||
onClick: function onClick() {
|
||||
if (this.isFocused || this.disabled) return;
|
||||
this.$refs.input.focus();
|
||||
},
|
||||
onFocus: function onFocus(e) {
|
||||
if (!this.$refs.input) return;
|
||||
if (document.activeElement !== this.$refs.input) {
|
||||
return this.$refs.input.focus();
|
||||
}
|
||||
if (!this.isFocused) {
|
||||
this.isFocused = true;
|
||||
this.$emit('focus', e);
|
||||
}
|
||||
},
|
||||
onInput: function onInput(e) {
|
||||
this.internalChange = true;
|
||||
this.mask && this.resetSelections(e.target);
|
||||
this.internalValue = e.target.value;
|
||||
this.badInput = e.target.validity && e.target.validity.badInput;
|
||||
},
|
||||
onKeyDown: function onKeyDown(e) {
|
||||
this.internalChange = true;
|
||||
if (e.keyCode === keyCodes.enter) this.$emit('change', this.internalValue);
|
||||
this.$emit('keydown', e);
|
||||
},
|
||||
onMouseDown: function onMouseDown(e) {
|
||||
// Prevent input from being blurred
|
||||
if (e.target !== this.$refs.input) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
VInput.options.methods.onMouseDown.call(this, e);
|
||||
},
|
||||
onMouseUp: function onMouseUp(e) {
|
||||
if (this.hasMouseDown) this.focus();
|
||||
VInput.options.methods.onMouseUp.call(this, e);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTextField.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+39
@@ -0,0 +1,39 @@
|
||||
import VTextField from './VTextField';
|
||||
import VTextarea from '../VTextarea/VTextarea';
|
||||
import rebuildSlots from '../../util/rebuildFunctionalSlots';
|
||||
import dedupeModelListeners from '../../util/dedupeModelListeners';
|
||||
import { deprecate } from '../../util/console';
|
||||
// TODO: remove this in v2.0
|
||||
/* @vue/component */
|
||||
var wrapper = {
|
||||
functional: true,
|
||||
$_wrapperFor: VTextField,
|
||||
props: {
|
||||
textarea: Boolean,
|
||||
multiLine: Boolean
|
||||
},
|
||||
render: function render(h, _ref) {
|
||||
var props = _ref.props,
|
||||
data = _ref.data,
|
||||
slots = _ref.slots,
|
||||
parent = _ref.parent;
|
||||
|
||||
dedupeModelListeners(data);
|
||||
var children = rebuildSlots(slots(), h);
|
||||
if (props.textarea) {
|
||||
deprecate('<v-text-field textarea>', '<v-textarea outline>', wrapper, parent);
|
||||
}
|
||||
if (props.multiLine) {
|
||||
deprecate('<v-text-field multi-line>', '<v-textarea>', wrapper, parent);
|
||||
}
|
||||
if (props.textarea || props.multiLine) {
|
||||
data.attrs.outline = props.textarea;
|
||||
return h(VTextarea, data, children);
|
||||
} else {
|
||||
return h(VTextField, data, children);
|
||||
}
|
||||
}
|
||||
};
|
||||
export { wrapper as VTextField };
|
||||
export default wrapper;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VTextField/index.js"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AACA,OAAO,SAAP,MAAsB,wBAAtB;AACA,OAAO,YAAP,MAAyB,mCAAzB;AACA,OAAO,oBAAP,MAAiC,iCAAjC;AACA,SAAS,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA,IAAM,UAAU;AACd,gBAAY,IADE;AAGd,kBAAc,UAHA;AAKd,WAAO;AACL,kBAAU,OADL;AAEL,mBAAW;AAFN,KALO;AAUd,UAVc,kBAUN,CAVM,QAU2B;AAAA,YAA5B,KAA4B,QAA5B,KAA4B;AAAA,YAArB,IAAqB,QAArB,IAAqB;AAAA,YAAf,KAAe,QAAf,KAAe;AAAA,YAAR,MAAQ,QAAR,MAAQ;;AACvC,6BAAqB,IAArB;AAEA,YAAM,WAAW,aAAa,OAAb,EAAsB,CAAtB,CAAjB;AAEA,YAAI,MAAM,QAAV,EAAoB;AAClB,sBAAU,yBAAV,EAAqC,sBAArC,EAA6D,OAA7D,EAAsE,MAAtE;AACD;AAED,YAAI,MAAM,SAAV,EAAqB;AACnB,sBAAU,2BAAV,EAAuC,cAAvC,EAAuD,OAAvD,EAAgE,MAAhE;AACD;AAED,YAAI,MAAM,QAAN,IAAkB,MAAM,SAA5B,EAAuC;AACrC,iBAAK,KAAL,CAAW,OAAX,GAAqB,MAAM,QAA3B;AACA,mBAAO,EAAE,SAAF,EAAa,IAAb,EAAmB,QAAnB,CAAP;AACD,SAHD,MAGO;AACL,mBAAO,EAAE,UAAF,EAAc,IAAd,EAAoB,QAApB,CAAP;AACD;AACF;AA7Ba,CAAhB;AAgCA,SAAS,WAAW,UAApB;AACA,eAAe,OAAf","sourcesContent":["import VTextField from './VTextField'\nimport VTextarea from '../VTextarea/VTextarea'\nimport rebuildSlots from '../../util/rebuildFunctionalSlots'\nimport dedupeModelListeners from '../../util/dedupeModelListeners'\nimport { deprecate } from '../../util/console'\n\n// TODO: remove this in v2.0\n/* @vue/component */\nconst wrapper = {\n functional: true,\n\n $_wrapperFor: VTextField,\n\n props: {\n textarea: Boolean,\n multiLine: Boolean\n },\n\n render (h, { props, data, slots, parent }) {\n dedupeModelListeners(data)\n\n const children = rebuildSlots(slots(), h)\n\n if (props.textarea) {\n deprecate('<v-text-field textarea>', '<v-textarea outline>', wrapper, parent)\n }\n\n if (props.multiLine) {\n deprecate('<v-text-field multi-line>', '<v-textarea>', wrapper, parent)\n }\n\n if (props.textarea || props.multiLine) {\n data.attrs.outline = props.textarea\n return h(VTextarea, data, children)\n } else {\n return h(VTextField, data, children)\n }\n }\n}\n\nexport { wrapper as VTextField }\nexport default wrapper\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user