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.0KB

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