Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VInput.js 8.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. 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; };
  2. // Styles
  3. import '../../../src/stylus/components/_inputs.styl';
  4. // Components
  5. import VIcon from '../VIcon';
  6. import VLabel from '../VLabel';
  7. import VMessages from '../VMessages';
  8. // Mixins
  9. import Colorable from '../../mixins/colorable';
  10. import Themeable from '../../mixins/themeable';
  11. import Validatable from '../../mixins/validatable';
  12. // Utilities
  13. import { convertToUnit, kebabCase } from '../../util/helpers';
  14. import { deprecate } from '../../util/console';
  15. import mixins from '../../util/mixins';
  16. export default mixins(Colorable, Themeable, Validatable
  17. /* @vue/component */
  18. ).extend({
  19. name: 'v-input',
  20. props: {
  21. appendIcon: String,
  22. /** @deprecated */
  23. appendIconCb: Function,
  24. backgroundColor: {
  25. type: String,
  26. default: ''
  27. },
  28. height: [Number, String],
  29. hideDetails: Boolean,
  30. hint: String,
  31. label: String,
  32. loading: Boolean,
  33. persistentHint: Boolean,
  34. prependIcon: String,
  35. /** @deprecated */
  36. prependIconCb: Function,
  37. value: { required: false }
  38. },
  39. data: function data() {
  40. return {
  41. attrsInput: {},
  42. lazyValue: this.value,
  43. hasMouseDown: false
  44. };
  45. },
  46. computed: {
  47. classes: function classes() {
  48. return {};
  49. },
  50. classesInput: function classesInput() {
  51. return _extends({}, this.classes, {
  52. 'v-input--has-state': this.hasState,
  53. 'v-input--hide-details': this.hideDetails,
  54. 'v-input--is-label-active': this.isLabelActive,
  55. 'v-input--is-dirty': this.isDirty,
  56. 'v-input--is-disabled': this.disabled,
  57. 'v-input--is-focused': this.isFocused,
  58. 'v-input--is-loading': this.loading !== false && this.loading !== undefined,
  59. 'v-input--is-readonly': this.readonly
  60. }, this.themeClasses);
  61. },
  62. directivesInput: function directivesInput() {
  63. return [];
  64. },
  65. hasHint: function hasHint() {
  66. return !this.hasMessages && this.hint && (this.persistentHint || this.isFocused);
  67. },
  68. hasLabel: function hasLabel() {
  69. return Boolean(this.$slots.label || this.label);
  70. },
  71. // Proxy for `lazyValue`
  72. // This allows an input
  73. // to function without
  74. // a provided model
  75. internalValue: {
  76. get: function get() {
  77. return this.lazyValue;
  78. },
  79. set: function set(val) {
  80. this.lazyValue = val;
  81. this.$emit(this.$_modelEvent, val);
  82. }
  83. },
  84. isDirty: function isDirty() {
  85. return !!this.lazyValue;
  86. },
  87. isDisabled: function isDisabled() {
  88. return Boolean(this.disabled || this.readonly);
  89. },
  90. isLabelActive: function isLabelActive() {
  91. return this.isDirty;
  92. }
  93. },
  94. watch: {
  95. value: function value(val) {
  96. this.lazyValue = val;
  97. }
  98. },
  99. beforeCreate: function beforeCreate() {
  100. // v-radio-group needs to emit a different event
  101. // https://github.com/vuetifyjs/vuetify/issues/4752
  102. this.$_modelEvent = this.$options.model && this.$options.model.event || 'input';
  103. },
  104. methods: {
  105. genContent: function genContent() {
  106. return [this.genPrependSlot(), this.genControl(), this.genAppendSlot()];
  107. },
  108. genControl: function genControl() {
  109. return this.$createElement('div', {
  110. staticClass: 'v-input__control'
  111. }, [this.genInputSlot(), this.genMessages()]);
  112. },
  113. genDefaultSlot: function genDefaultSlot() {
  114. return [this.genLabel(), this.$slots.default];
  115. },
  116. // TODO: remove shouldDeprecate (2.0), used for clearIcon
  117. genIcon: function genIcon(type, cb) {
  118. var _this = this;
  119. var shouldDeprecate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
  120. var icon = this[type + 'Icon'];
  121. var eventName = 'click:' + kebabCase(type);
  122. cb = cb || this[type + 'IconCb'];
  123. if (shouldDeprecate && type && cb) {
  124. deprecate(':' + type + '-icon-cb', '@' + eventName, this);
  125. }
  126. var data = {
  127. props: {
  128. color: this.validationState,
  129. dark: this.dark,
  130. disabled: this.disabled,
  131. light: this.light
  132. },
  133. on: !(this.$listeners[eventName] || cb) ? undefined : {
  134. click: function click(e) {
  135. e.preventDefault();
  136. e.stopPropagation();
  137. _this.$emit(eventName, e);
  138. cb && cb(e);
  139. },
  140. // Container has mouseup event that will
  141. // trigger menu open if enclosed
  142. mouseup: function mouseup(e) {
  143. e.preventDefault();
  144. e.stopPropagation();
  145. }
  146. }
  147. };
  148. return this.$createElement('div', {
  149. staticClass: 'v-input__icon v-input__icon--' + kebabCase(type),
  150. key: '' + type + icon
  151. }, [this.$createElement(VIcon, data, icon)]);
  152. },
  153. genInputSlot: function genInputSlot() {
  154. return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
  155. staticClass: 'v-input__slot',
  156. style: { height: convertToUnit(this.height) },
  157. directives: this.directivesInput,
  158. on: {
  159. click: this.onClick,
  160. mousedown: this.onMouseDown,
  161. mouseup: this.onMouseUp
  162. },
  163. ref: 'input-slot'
  164. }), [this.genDefaultSlot()]);
  165. },
  166. genLabel: function genLabel() {
  167. if (!this.hasLabel) return null;
  168. return this.$createElement(VLabel, {
  169. props: {
  170. color: this.validationState,
  171. dark: this.dark,
  172. focused: this.hasState,
  173. for: this.$attrs.id,
  174. light: this.light
  175. }
  176. }, this.$slots.label || this.label);
  177. },
  178. genMessages: function genMessages() {
  179. if (this.hideDetails) return null;
  180. var messages = this.hasHint ? [this.hint] : this.validations;
  181. return this.$createElement(VMessages, {
  182. props: {
  183. color: this.hasHint ? '' : this.validationState,
  184. dark: this.dark,
  185. light: this.light,
  186. value: this.hasMessages || this.hasHint ? messages : []
  187. }
  188. });
  189. },
  190. genSlot: function genSlot(type, location, slot) {
  191. if (!slot.length) return null;
  192. var ref = type + '-' + location;
  193. return this.$createElement('div', {
  194. staticClass: 'v-input__' + ref,
  195. ref: ref
  196. }, slot);
  197. },
  198. genPrependSlot: function genPrependSlot() {
  199. var slot = [];
  200. if (this.$slots.prepend) {
  201. slot.push(this.$slots.prepend);
  202. } else if (this.prependIcon) {
  203. slot.push(this.genIcon('prepend'));
  204. }
  205. return this.genSlot('prepend', 'outer', slot);
  206. },
  207. genAppendSlot: function genAppendSlot() {
  208. var slot = [];
  209. // Append icon for text field was really
  210. // an appended inner icon, v-text-field
  211. // will overwrite this method in order to obtain
  212. // backwards compat
  213. if (this.$slots.append) {
  214. slot.push(this.$slots.append);
  215. } else if (this.appendIcon) {
  216. slot.push(this.genIcon('append'));
  217. }
  218. return this.genSlot('append', 'outer', slot);
  219. },
  220. onClick: function onClick(e) {
  221. this.$emit('click', e);
  222. },
  223. onMouseDown: function onMouseDown(e) {
  224. this.hasMouseDown = true;
  225. this.$emit('mousedown', e);
  226. },
  227. onMouseUp: function onMouseUp(e) {
  228. this.hasMouseDown = false;
  229. this.$emit('mouseup', e);
  230. }
  231. },
  232. render: function render(h) {
  233. return h('div', this.setTextColor(this.validationState, {
  234. staticClass: 'v-input',
  235. attrs: this.attrsInput,
  236. 'class': this.classesInput
  237. }), this.genContent());
  238. }
  239. });
  240. //# sourceMappingURL=VInput.js.map