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 9.6KB

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