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.

VSwitch.js 3.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. import '../../../src/stylus/components/_selection-controls.styl';
  3. import '../../../src/stylus/components/_switch.styl';
  4. // Mixins
  5. import Selectable from '../../mixins/selectable';
  6. // Directives
  7. import Touch from '../../directives/touch';
  8. // Components
  9. import { VFabTransition } from '../transitions';
  10. import VProgressCircular from '../VProgressCircular/VProgressCircular';
  11. // Helpers
  12. import { keyCodes } from '../../util/helpers';
  13. /* @vue/component */
  14. export default {
  15. name: 'v-switch',
  16. directives: { Touch: Touch },
  17. mixins: [Selectable],
  18. props: {
  19. loading: {
  20. type: [Boolean, String],
  21. default: false
  22. }
  23. },
  24. computed: {
  25. classes: function classes() {
  26. return {
  27. 'v-input--selection-controls v-input--switch': true
  28. };
  29. },
  30. switchData: function switchData() {
  31. return this.setTextColor(this.loading ? undefined : this.computedColor, {
  32. class: this.themeClasses
  33. });
  34. }
  35. },
  36. methods: {
  37. genDefaultSlot: function genDefaultSlot() {
  38. return [this.genSwitch(), this.genLabel()];
  39. },
  40. genSwitch: function genSwitch() {
  41. return this.$createElement('div', {
  42. staticClass: 'v-input--selection-controls__input'
  43. }, [this.genInput('checkbox', this.$attrs), this.genRipple(this.setTextColor(this.computedColor, {
  44. directives: [{
  45. name: 'touch',
  46. value: {
  47. left: this.onSwipeLeft,
  48. right: this.onSwipeRight
  49. }
  50. }]
  51. })), this.$createElement('div', _extends({
  52. staticClass: 'v-input--switch__track'
  53. }, this.switchData)), this.$createElement('div', _extends({
  54. staticClass: 'v-input--switch__thumb'
  55. }, this.switchData), [this.genProgress()])]);
  56. },
  57. genProgress: function genProgress() {
  58. return this.$createElement(VFabTransition, {}, [this.loading === false ? null : this.$slots.progress || this.$createElement(VProgressCircular, {
  59. props: {
  60. color: this.loading === true || this.loading === '' ? this.color || 'primary' : this.loading,
  61. size: 16,
  62. width: 2,
  63. indeterminate: true
  64. }
  65. })]);
  66. },
  67. onSwipeLeft: function onSwipeLeft() {
  68. if (this.isActive) this.onChange();
  69. },
  70. onSwipeRight: function onSwipeRight() {
  71. if (!this.isActive) this.onChange();
  72. },
  73. onKeydown: function onKeydown(e) {
  74. if (e.keyCode === keyCodes.left && this.isActive || e.keyCode === keyCodes.right && !this.isActive) this.onChange();
  75. }
  76. }
  77. };
  78. //# sourceMappingURL=VSwitch.js.map