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.

VIcon.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  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; };
  6. // Mixins
  7. // Util
  8. // Types
  9. require('../../../src/stylus/components/_icons.styl');
  10. var _colorable = require('../../mixins/colorable');
  11. var _colorable2 = _interopRequireDefault(_colorable);
  12. var _sizeable = require('../../mixins/sizeable');
  13. var _sizeable2 = _interopRequireDefault(_sizeable);
  14. var _themeable = require('../../mixins/themeable');
  15. var _themeable2 = _interopRequireDefault(_themeable);
  16. var _helpers = require('../../util/helpers');
  17. var _vue = require('vue');
  18. var _vue2 = _interopRequireDefault(_vue);
  19. var _mixins = require('../../util/mixins');
  20. var _mixins2 = _interopRequireDefault(_mixins);
  21. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  22. var SIZE_MAP;
  23. (function (SIZE_MAP) {
  24. SIZE_MAP["small"] = "16px";
  25. SIZE_MAP["default"] = "24px";
  26. SIZE_MAP["medium"] = "28px";
  27. SIZE_MAP["large"] = "36px";
  28. SIZE_MAP["xLarge"] = "40px";
  29. })(SIZE_MAP || (SIZE_MAP = {}));
  30. function isFontAwesome5(iconType) {
  31. return ['fas', 'far', 'fal', 'fab'].some(function (val) {
  32. return iconType.includes(val);
  33. });
  34. }
  35. var VIcon = (0, _mixins2.default)(_colorable2.default, _sizeable2.default, _themeable2.default
  36. /* @vue/component */
  37. ).extend({
  38. name: 'v-icon',
  39. props: {
  40. disabled: Boolean,
  41. left: Boolean,
  42. right: Boolean
  43. },
  44. methods: {
  45. getIcon: function getIcon() {
  46. var iconName = '';
  47. if (this.$slots.default) iconName = this.$slots.default[0].text.trim();
  48. return (0, _helpers.remapInternalIcon)(this, iconName);
  49. },
  50. getSize: function getSize() {
  51. var sizes = {
  52. small: this.small,
  53. medium: this.medium,
  54. large: this.large,
  55. xLarge: this.xLarge
  56. };
  57. var explicitSize = (0, _helpers.keys)(sizes).find(function (key) {
  58. return sizes[key];
  59. });
  60. return explicitSize && SIZE_MAP[explicitSize] || (0, _helpers.convertToUnit)(this.size);
  61. },
  62. // Component data for both font and svg icon.
  63. getDefaultData: function getDefaultData() {
  64. var data = {
  65. staticClass: 'v-icon',
  66. class: {
  67. 'v-icon--disabled': this.disabled,
  68. 'v-icon--left': this.left,
  69. 'v-icon--link': this.$listeners.click || this.$listeners['!click'],
  70. 'v-icon--right': this.right
  71. },
  72. attrs: _extends({
  73. 'aria-hidden': true
  74. }, this.$attrs),
  75. on: this.$listeners
  76. };
  77. return data;
  78. },
  79. applyColors: function applyColors(data) {
  80. data.class = _extends({}, data.class, this.themeClasses);
  81. this.setTextColor(this.color, data);
  82. },
  83. renderFontIcon: function renderFontIcon(icon, h) {
  84. var newChildren = [];
  85. var data = this.getDefaultData();
  86. var iconType = 'material-icons';
  87. // Material Icon delimiter is _
  88. // https://material.io/icons/
  89. var delimiterIndex = icon.indexOf('-');
  90. var isMaterialIcon = delimiterIndex <= -1;
  91. if (isMaterialIcon) {
  92. // Material icon uses ligatures.
  93. newChildren.push(icon);
  94. } else {
  95. iconType = icon.slice(0, delimiterIndex);
  96. if (isFontAwesome5(iconType)) iconType = '';
  97. }
  98. data.class[iconType] = true;
  99. data.class[icon] = !isMaterialIcon;
  100. var fontSize = this.getSize();
  101. if (fontSize) data.style = { fontSize: fontSize };
  102. this.applyColors(data);
  103. return h('i', data, newChildren);
  104. },
  105. renderSvgIcon: function renderSvgIcon(icon, h) {
  106. var data = this.getDefaultData();
  107. data.class['v-icon--is-component'] = true;
  108. var size = this.getSize();
  109. if (size) {
  110. data.style = {
  111. fontSize: size,
  112. height: size
  113. };
  114. }
  115. this.applyColors(data);
  116. var component = icon.component;
  117. data.props = icon.props;
  118. data.nativeOn = data.on;
  119. return h(component, data);
  120. }
  121. },
  122. render: function render(h) {
  123. var icon = this.getIcon();
  124. if (typeof icon === 'string') {
  125. return this.renderFontIcon(icon, h);
  126. }
  127. return this.renderSvgIcon(icon, h);
  128. }
  129. });
  130. exports.default = _vue2.default.extend({
  131. name: 'v-icon',
  132. $_wrapperFor: VIcon,
  133. functional: true,
  134. render: function render(h, _ref) {
  135. var data = _ref.data,
  136. children = _ref.children;
  137. var iconName = '';
  138. // Support usage of v-text and v-html
  139. if (data.domProps) {
  140. iconName = data.domProps.textContent || data.domProps.innerHTML || iconName;
  141. // Remove nodes so it doesn't
  142. // overwrite our changes
  143. delete data.domProps.textContent;
  144. delete data.domProps.innerHTML;
  145. }
  146. return h(VIcon, data, iconName ? [iconName] : children);
  147. }
  148. });
  149. //# sourceMappingURL=VIcon.js.map