diff --git a/index.d.ts b/index.d.ts index 43348fa5..a03e3a9d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,61 +1,45 @@ -import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; -import { DefineComponent } from "vue"; +import { IconDefinition } from '@fortawesome/fontawesome-svg-core' +import { DefineComponent } from 'vue' interface FontAwesomeIconProps { - border?: boolean; - fixedWidth?: boolean; - flip?: "horizontal" | "vertical" | "both"; - icon: object | Array | string | IconDefinition; - mask?: object | Array | string; - maskId?: object | Array | string; - listItem?: boolean; - pull?: "right" | "left"; - pulse?: boolean; - rotation?: 90 | 180 | 270 | "90" | "180" | "270"; - swapOpacity?: boolean; - size?: - | "2xs" - | "xs" - | "sm" - | "lg" - | "xl" - | "2xl" - | "1x" - | "2x" - | "3x" - | "4x" - | "5x" - | "6x" - | "7x" - | "8x" - | "9x" - | "10x"; - spin?: boolean; - transform?: object | string; - symbol?: boolean | string; - title?: string; - titleId?: string; - inverse?: boolean; - bounce?: boolean; - shake?: boolean; - beat?: boolean; - fade?: boolean; - beatFade?: boolean; - spinPulse?: boolean; - spinReverse?: boolean; + border?: boolean + fixedWidth?: boolean + flip?: 'horizontal' | 'vertical' | 'both' + icon: object | Array | string | IconDefinition + mask?: object | Array | string + maskId?: object | Array | string + listItem?: boolean + pull?: 'right' | 'left' + pulse?: boolean + rotation?: 90 | 180 | 270 | '90' | '180' | '270' + swapOpacity?: boolean + size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' + spin?: boolean + transform?: object | string + symbol?: boolean | string + title?: string + titleId?: string + inverse?: boolean + bounce?: boolean + shake?: boolean + beat?: boolean + fade?: boolean + beatFade?: boolean + spinPulse?: boolean + spinReverse?: boolean } interface FontAwesomeLayersProps { - fixedWidth?: boolean; + fixedWidth?: boolean } interface FontAwesomeLayersTextProps { - value: string | number; - transform?: object | string; - counter?: boolean; - position?: "bottom-left" | "bottom-right" | "top-left" | "top-right"; + value: string | number + transform?: object | string + counter?: boolean + position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' } -declare const FontAwesomeIcon: DefineComponent; -declare const FontAwesomeLayers: DefineComponent; -declare const FontAwesomeLayersText: DefineComponent; +declare const FontAwesomeIcon: DefineComponent +declare const FontAwesomeLayers: DefineComponent +declare const FontAwesomeLayersText: DefineComponent diff --git a/index.es.js b/index.es.js index de68f317..ab5d0608 100644 --- a/index.es.js +++ b/index.es.js @@ -1,256 +1,274 @@ -import { parse, icon, config, text } from '@fortawesome/fontawesome-svg-core'; -import { h, defineComponent, computed, watch } from 'vue'; +import { parse, icon, config, text } from '@fortawesome/fontawesome-svg-core' +import { h, defineComponent, computed, watch } from 'vue' function ownKeys(object, enumerableOnly) { - var keys = Object.keys(object); + var keys = Object.keys(object) if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - enumerableOnly && (symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - })), keys.push.apply(keys, symbols); + var symbols = Object.getOwnPropertySymbols(object) + enumerableOnly && + (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable + })), + keys.push.apply(keys, symbols) } - return keys; + return keys } function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { - var source = null != arguments[i] ? arguments[i] : {}; - i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { - _defineProperty(target, key, source[key]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); + var source = null != arguments[i] ? arguments[i] : {} + i % 2 + ? ownKeys(Object(source), !0).forEach(function (key) { + _defineProperty(target, key, source[key]) + }) + : Object.getOwnPropertyDescriptors + ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) + : ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)) + }) } - return target; + return target } function _typeof(obj) { - "@babel/helpers - typeof"; - - return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }, _typeof(obj); + '@babel/helpers - typeof' + + return ( + (_typeof = + 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator + ? function (obj) { + return typeof obj + } + : function (obj) { + return obj && 'function' == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj + }), + _typeof(obj) + ) } function _defineProperty(obj, key, value) { - key = _toPropertyKey(key); + key = _toPropertyKey(key) if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true - }); + }) } else { - obj[key] = value; + obj[key] = value } - return obj; + return obj } function _objectWithoutPropertiesLoose(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; + if (source == null) return {} + var target = {} + var sourceKeys = Object.keys(source) + var key, i for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; + key = sourceKeys[i] + if (excluded.indexOf(key) >= 0) continue + target[key] = source[key] } - return target; + return target } function _objectWithoutProperties(source, excluded) { - if (source == null) return {}; - var target = _objectWithoutPropertiesLoose(source, excluded); - var key, i; + if (source == null) return {} + var target = _objectWithoutPropertiesLoose(source, excluded) + var key, i if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + var sourceSymbolKeys = Object.getOwnPropertySymbols(source) for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; + key = sourceSymbolKeys[i] + if (excluded.indexOf(key) >= 0) continue + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue + target[key] = source[key] } } - return target; + return target } function _toConsumableArray(arr) { - return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread() } function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return _arrayLikeToArray(arr); + if (Array.isArray(arr)) return _arrayLikeToArray(arr) } function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); + if ((typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) || iter['@@iterator'] != null) return Array.from(iter) } function _unsupportedIterableToArray(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); + if (!o) return + if (typeof o === 'string') return _arrayLikeToArray(o, minLen) + var n = Object.prototype.toString.call(o).slice(8, -1) + if (n === 'Object' && o.constructor) n = o.constructor.name + if (n === 'Map' || n === 'Set') return Array.from(o) + if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen) } function _arrayLikeToArray(arr, len) { - if (len == null || len > arr.length) len = arr.length; - for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; - return arr2; + if (len == null || len > arr.length) len = arr.length + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i] + return arr2 } function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + throw new TypeError('Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.') } function _toPrimitive(input, hint) { - if (typeof input !== "object" || input === null) return input; - var prim = input[Symbol.toPrimitive]; + if (typeof input !== 'object' || input === null) return input + var prim = input[Symbol.toPrimitive] if (prim !== undefined) { - var res = prim.call(input, hint || "default"); - if (typeof res !== "object") return res; - throw new TypeError("@@toPrimitive must return a primitive value."); + var res = prim.call(input, hint || 'default') + if (typeof res !== 'object') return res + throw new TypeError('@@toPrimitive must return a primitive value.') } - return (hint === "string" ? String : Number)(input); + return (hint === 'string' ? String : Number)(input) } function _toPropertyKey(arg) { - var key = _toPrimitive(arg, "string"); - return typeof key === "symbol" ? key : String(key); + var key = _toPrimitive(arg, 'string') + return typeof key === 'symbol' ? key : String(key) } -var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - -var humps$1 = {exports: {}}; - -(function (module) { -(function(global) { - - var _processKeys = function(convert, obj, options) { - if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) { - return obj; - } - - var output, - i = 0, - l = 0; - - if(_isArray(obj)) { - output = []; - for(l=obj.length; i 1 && arguments[1] !== undefined ? arguments[1] : {}; - var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {} + var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} // If the abstract element is a string, we'll just return a string render function if (typeof abstractElement === 'string') { - return abstractElement; + return abstractElement } // Converting abstract element children into Vue VNodes var children = (abstractElement.children || []).map(function (child) { - return convert(child); - }); + return convert(child) + }) // Converting abstract element attributes into valid Vue format - var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) { - var value = abstractElement.attributes[key]; - switch (key) { - case 'class': - mixins.class = classToObject(value); - break; - case 'style': - mixins.style = styleToObject(value); - break; - default: - mixins.attrs[key] = value; + var mixins = Object.keys(abstractElement.attributes || {}).reduce( + function (mixins, key) { + var value = abstractElement.attributes[key] + switch (key) { + case 'class': + mixins.class = classToObject(value) + break + case 'style': + mixins.style = styleToObject(value) + break + default: + mixins.attrs[key] = value + } + return mixins + }, + { + attrs: {}, + class: {}, + style: {} } - return mixins; - }, { - attrs: {}, - class: {}, - style: {} - }); + ) // Now, we'll return the VNode - attrs.class; - var _attrs$style = attrs.style, + attrs.class + var _attrs$style = attrs.style, aStyle = _attrs$style === void 0 ? {} : _attrs$style, - otherAttrs = _objectWithoutProperties(attrs, _excluded); - return h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, { - class: mixins.class, - style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle) - }, mixins.attrs), otherAttrs), children); + otherAttrs = _objectWithoutProperties(attrs, _excluded) + return h( + abstractElement.tag, + _objectSpread2( + _objectSpread2( + _objectSpread2({}, props), + {}, + { + class: mixins.class, + style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle) + }, + mixins.attrs + ), + otherAttrs + ), + children + ) } -var PRODUCTION = false; +var PRODUCTION = false try { - PRODUCTION = process.env.NODE_ENV === 'production'; + PRODUCTION = process.env.NODE_ENV === 'production' } catch (e) {} -function log () { +function log() { if (!PRODUCTION && console && typeof console.error === 'function') { - var _console; - (_console = console).error.apply(_console, arguments); + var _console + ;(_console = console).error.apply(_console, arguments) } } function objectWithKey(key, value) { - return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {}; + return (Array.isArray(value) && value.length > 0) || (!Array.isArray(value) && value) ? _defineProperty({}, key, value) : {} } function classList(props) { - var _classes; - var classes = (_classes = { - 'fa-spin': props.spin, - 'fa-pulse': props.pulse, - 'fa-fw': props.fixedWidth, - 'fa-border': props.border, - 'fa-li': props.listItem, - 'fa-inverse': props.inverse, - 'fa-flip': props.flip === true, - 'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both', - 'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both' - }, _defineProperty(_classes, "fa-".concat(props.size), props.size !== null), _defineProperty(_classes, "fa-rotate-".concat(props.rotation), props.rotation !== null), _defineProperty(_classes, "fa-pull-".concat(props.pull), props.pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _defineProperty(_classes, 'fa-bounce', props.bounce), _defineProperty(_classes, 'fa-shake', props.shake), _defineProperty(_classes, 'fa-beat', props.beat), _defineProperty(_classes, 'fa-fade', props.fade), _defineProperty(_classes, 'fa-beat-fade', props.beatFade), _defineProperty(_classes, 'fa-flash', props.flash), _defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), _defineProperty(_classes, 'fa-spin-reverse', props.spinReverse), _classes); - return Object.keys(classes).map(function (key) { - return classes[key] ? key : null; - }).filter(function (key) { - return key; - }); + var _classes + var classes = + ((_classes = { + 'fa-spin': props.spin, + 'fa-pulse': props.pulse, + 'fa-fw': props.fixedWidth, + 'fa-border': props.border, + 'fa-li': props.listItem, + 'fa-inverse': props.inverse, + 'fa-flip': props.flip === true, + 'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both', + 'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both' + }), + _defineProperty(_classes, 'fa-'.concat(props.size), props.size !== null), + _defineProperty(_classes, 'fa-rotate-'.concat(props.rotation), props.rotation !== null), + _defineProperty(_classes, 'fa-pull-'.concat(props.pull), props.pull !== null), + _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), + _defineProperty(_classes, 'fa-bounce', props.bounce), + _defineProperty(_classes, 'fa-shake', props.shake), + _defineProperty(_classes, 'fa-beat', props.beat), + _defineProperty(_classes, 'fa-fade', props.fade), + _defineProperty(_classes, 'fa-beat-fade', props.beatFade), + _defineProperty(_classes, 'fa-flash', props.flash), + _defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), + _defineProperty(_classes, 'fa-spin-reverse', props.spinReverse), + _classes) + return Object.keys(classes) + .map(function (key) { + return classes[key] ? key : null + }) + .filter(function (key) { + return key + }) } function normalizeIconArgs(icon) { - if (icon && _typeof(icon) === "object" && icon.prefix && icon.iconName && icon.icon) { - return icon; + if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) { + return icon } if (parse.icon) { - return parse.icon(icon); + return parse.icon(icon) } if (icon === null) { - return null; + return null } - if (_typeof(icon) === "object" && icon.prefix && icon.iconName) { - return icon; + if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) { + return icon } if (Array.isArray(icon) && icon.length === 2) { return { prefix: icon[0], iconName: icon[1] - }; + } } - if (typeof icon === "string") { + if (typeof icon === 'string') { return { - prefix: "fas", + prefix: 'fas', iconName: icon - }; + } } } var FontAwesomeIcon = defineComponent({ - name: "FontAwesomeIcon", + name: 'FontAwesomeIcon', props: { border: { type: Boolean, @@ -409,7 +462,7 @@ var FontAwesomeIcon = defineComponent({ type: [Boolean, String], default: false, validator: function validator(value) { - return [true, false, "horizontal", "vertical", "both"].indexOf(value) > -1; + return [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1 } }, icon: { @@ -432,7 +485,7 @@ var FontAwesomeIcon = defineComponent({ type: String, default: null, validator: function validator(value) { - return ["right", "left"].indexOf(value) > -1; + return ['right', 'left'].indexOf(value) > -1 } }, pulse: { @@ -443,7 +496,7 @@ var FontAwesomeIcon = defineComponent({ type: [String, Number], default: null, validator: function validator(value) { - return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1; + return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1 } }, swapOpacity: { @@ -454,7 +507,7 @@ var FontAwesomeIcon = defineComponent({ type: String, default: null, validator: function validator(value) { - return ["2xs", "xs", "sm", "lg", "xl", "2xl", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"].indexOf(value) > -1; + return ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1 } }, spin: { @@ -515,42 +568,53 @@ var FontAwesomeIcon = defineComponent({ } }, setup: function setup(props, _ref) { - var attrs = _ref.attrs; + var attrs = _ref.attrs var icon$1 = computed(function () { - return normalizeIconArgs(props.icon); - }); + return normalizeIconArgs(props.icon) + }) var classes = computed(function () { - return objectWithKey("classes", classList(props)); - }); + return objectWithKey('classes', classList(props)) + }) var transform = computed(function () { - return objectWithKey("transform", typeof props.transform === "string" ? parse.transform(props.transform) : props.transform); - }); + return objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform) + }) var mask = computed(function () { - return objectWithKey("mask", normalizeIconArgs(props.mask)); - }); + return objectWithKey('mask', normalizeIconArgs(props.mask)) + }) var renderedIcon = computed(function () { - return icon(icon$1.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, { - symbol: props.symbol, - title: props.title, - titleId: props.titleId, - maskId: props.maskId - })); - }); - watch(renderedIcon, function (value) { - if (!value) { - return log("Could not find one or more icon(s)", icon$1.value, mask.value); + return icon( + icon$1.value, + _objectSpread2( + _objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), + {}, + { + symbol: props.symbol, + title: props.title, + titleId: props.titleId, + maskId: props.maskId + } + ) + ) + }) + watch( + renderedIcon, + function (value) { + if (!value) { + return log('Could not find one or more icon(s)', icon$1.value, mask.value) + } + }, + { + immediate: true } - }, { - immediate: true - }); + ) var vnode = computed(function () { - return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null; - }); + return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null + }) return function () { - return vnode.value; - }; + return vnode.value + } } -}); +}) var FontAwesomeLayers = defineComponent({ name: 'FontAwesomeLayers', @@ -561,18 +625,22 @@ var FontAwesomeLayers = defineComponent({ } }, setup: function setup(props, _ref) { - var slots = _ref.slots; - var familyPrefix = config.familyPrefix; + var slots = _ref.slots + var familyPrefix = config.familyPrefix var className = computed(function () { - return ["".concat(familyPrefix, "-layers")].concat(_toConsumableArray(props.fixedWidth ? ["".concat(familyPrefix, "-fw")] : [])); - }); + return [''.concat(familyPrefix, '-layers')].concat(_toConsumableArray(props.fixedWidth ? [''.concat(familyPrefix, '-fw')] : [])) + }) return function () { - return h('div', { - class: className.value - }, slots.default ? slots.default() : []); - }; + return h( + 'div', + { + class: className.value + }, + slots.default ? slots.default() : [] + ) + } } -}); +}) var FontAwesomeLayersText = defineComponent({ name: 'FontAwesomeLayersText', @@ -593,34 +661,40 @@ var FontAwesomeLayersText = defineComponent({ type: String, default: null, validator: function validator(value) { - return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1; + return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1 } } }, setup: function setup(props, _ref) { - var attrs = _ref.attrs; - var familyPrefix = config.familyPrefix; + var attrs = _ref.attrs + var familyPrefix = config.familyPrefix var classes = computed(function () { - return objectWithKey('classes', [].concat(_toConsumableArray(props.counter ? ["".concat(familyPrefix, "-layers-counter")] : []), _toConsumableArray(props.position ? ["".concat(familyPrefix, "-layers-").concat(props.position)] : []))); - }); + return objectWithKey( + 'classes', + [].concat( + _toConsumableArray(props.counter ? [''.concat(familyPrefix, '-layers-counter')] : []), + _toConsumableArray(props.position ? [''.concat(familyPrefix, '-layers-').concat(props.position)] : []) + ) + ) + }) var transform = computed(function () { - return objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform); - }); + return objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform) + }) var abstractElement = computed(function () { var _text = text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)), - abstract = _text.abstract; + abstract = _text.abstract if (props.counter) { - abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', ''); + abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '') } - return abstract[0]; - }); + return abstract[0] + }) var vnode = computed(function () { - return convert(abstractElement.value, {}, attrs); - }); + return convert(abstractElement.value, {}, attrs) + }) return function () { - return vnode.value; - }; + return vnode.value + } } -}); +}) -export { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText }; +export { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } diff --git a/index.js b/index.js index d02875d7..579b7332 100644 --- a/index.js +++ b/index.js @@ -1,259 +1,280 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fortawesome/fontawesome-svg-core'), require('vue')) : - typeof define === 'function' && define.amd ? define(['exports', '@fortawesome/fontawesome-svg-core', 'vue'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vue-fontawesome"] = {}, global.FontAwesome, global.vue)); -})(this, (function (exports, fontawesomeSvgCore, vue) { 'use strict'; +;(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? factory(exports, require('@fortawesome/fontawesome-svg-core'), require('vue')) + : typeof define === 'function' && define.amd + ? define(['exports', '@fortawesome/fontawesome-svg-core', 'vue'], factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), factory((global['vue-fontawesome'] = {}), global.FontAwesome, global.vue)) +})(this, function (exports, fontawesomeSvgCore, vue) { + 'use strict' function ownKeys(object, enumerableOnly) { - var keys = Object.keys(object); + var keys = Object.keys(object) if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - enumerableOnly && (symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - })), keys.push.apply(keys, symbols); + var symbols = Object.getOwnPropertySymbols(object) + enumerableOnly && + (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable + })), + keys.push.apply(keys, symbols) } - return keys; + return keys } function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { - var source = null != arguments[i] ? arguments[i] : {}; - i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { - _defineProperty(target, key, source[key]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); + var source = null != arguments[i] ? arguments[i] : {} + i % 2 + ? ownKeys(Object(source), !0).forEach(function (key) { + _defineProperty(target, key, source[key]) + }) + : Object.getOwnPropertyDescriptors + ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) + : ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)) + }) } - return target; + return target } function _typeof(obj) { - "@babel/helpers - typeof"; - - return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }, _typeof(obj); + '@babel/helpers - typeof' + + return ( + (_typeof = + 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator + ? function (obj) { + return typeof obj + } + : function (obj) { + return obj && 'function' == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj + }), + _typeof(obj) + ) } function _defineProperty(obj, key, value) { - key = _toPropertyKey(key); + key = _toPropertyKey(key) if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true - }); + }) } else { - obj[key] = value; + obj[key] = value } - return obj; + return obj } function _objectWithoutPropertiesLoose(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; + if (source == null) return {} + var target = {} + var sourceKeys = Object.keys(source) + var key, i for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; + key = sourceKeys[i] + if (excluded.indexOf(key) >= 0) continue + target[key] = source[key] } - return target; + return target } function _objectWithoutProperties(source, excluded) { - if (source == null) return {}; - var target = _objectWithoutPropertiesLoose(source, excluded); - var key, i; + if (source == null) return {} + var target = _objectWithoutPropertiesLoose(source, excluded) + var key, i if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + var sourceSymbolKeys = Object.getOwnPropertySymbols(source) for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; + key = sourceSymbolKeys[i] + if (excluded.indexOf(key) >= 0) continue + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue + target[key] = source[key] } } - return target; + return target } function _toConsumableArray(arr) { - return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread() } function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return _arrayLikeToArray(arr); + if (Array.isArray(arr)) return _arrayLikeToArray(arr) } function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); + if ((typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) || iter['@@iterator'] != null) return Array.from(iter) } function _unsupportedIterableToArray(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); + if (!o) return + if (typeof o === 'string') return _arrayLikeToArray(o, minLen) + var n = Object.prototype.toString.call(o).slice(8, -1) + if (n === 'Object' && o.constructor) n = o.constructor.name + if (n === 'Map' || n === 'Set') return Array.from(o) + if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen) } function _arrayLikeToArray(arr, len) { - if (len == null || len > arr.length) len = arr.length; - for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; - return arr2; + if (len == null || len > arr.length) len = arr.length + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i] + return arr2 } function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + throw new TypeError('Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.') } function _toPrimitive(input, hint) { - if (typeof input !== "object" || input === null) return input; - var prim = input[Symbol.toPrimitive]; + if (typeof input !== 'object' || input === null) return input + var prim = input[Symbol.toPrimitive] if (prim !== undefined) { - var res = prim.call(input, hint || "default"); - if (typeof res !== "object") return res; - throw new TypeError("@@toPrimitive must return a primitive value."); + var res = prim.call(input, hint || 'default') + if (typeof res !== 'object') return res + throw new TypeError('@@toPrimitive must return a primitive value.') } - return (hint === "string" ? String : Number)(input); + return (hint === 'string' ? String : Number)(input) } function _toPropertyKey(arg) { - var key = _toPrimitive(arg, "string"); - return typeof key === "symbol" ? key : String(key); + var key = _toPrimitive(arg, 'string') + return typeof key === 'symbol' ? key : String(key) } - var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - - var humps$1 = {exports: {}}; - - (function (module) { - (function(global) { - - var _processKeys = function(convert, obj, options) { - if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) { - return obj; - } - - var output, - i = 0, - l = 0; - - if(_isArray(obj)) { - output = []; - for(l=obj.length; i 1 && arguments[1] !== undefined ? arguments[1] : {}; - var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {} + var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {} // If the abstract element is a string, we'll just return a string render function if (typeof abstractElement === 'string') { - return abstractElement; + return abstractElement } // Converting abstract element children into Vue VNodes var children = (abstractElement.children || []).map(function (child) { - return convert(child); - }); + return convert(child) + }) // Converting abstract element attributes into valid Vue format - var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) { - var value = abstractElement.attributes[key]; - switch (key) { - case 'class': - mixins.class = classToObject(value); - break; - case 'style': - mixins.style = styleToObject(value); - break; - default: - mixins.attrs[key] = value; + var mixins = Object.keys(abstractElement.attributes || {}).reduce( + function (mixins, key) { + var value = abstractElement.attributes[key] + switch (key) { + case 'class': + mixins.class = classToObject(value) + break + case 'style': + mixins.style = styleToObject(value) + break + default: + mixins.attrs[key] = value + } + return mixins + }, + { + attrs: {}, + class: {}, + style: {} } - return mixins; - }, { - attrs: {}, - class: {}, - style: {} - }); + ) // Now, we'll return the VNode - attrs.class; - var _attrs$style = attrs.style, + attrs.class + var _attrs$style = attrs.style, aStyle = _attrs$style === void 0 ? {} : _attrs$style, - otherAttrs = _objectWithoutProperties(attrs, _excluded); - return vue.h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, { - class: mixins.class, - style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle) - }, mixins.attrs), otherAttrs), children); + otherAttrs = _objectWithoutProperties(attrs, _excluded) + return vue.h( + abstractElement.tag, + _objectSpread2( + _objectSpread2( + _objectSpread2({}, props), + {}, + { + class: mixins.class, + style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle) + }, + mixins.attrs + ), + otherAttrs + ), + children + ) } - var PRODUCTION = false; + var PRODUCTION = false try { - PRODUCTION = process.env.NODE_ENV === 'production'; + PRODUCTION = process.env.NODE_ENV === 'production' } catch (e) {} - function log () { + function log() { if (!PRODUCTION && console && typeof console.error === 'function') { - var _console; - (_console = console).error.apply(_console, arguments); + var _console + ;(_console = console).error.apply(_console, arguments) } } function objectWithKey(key, value) { - return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {}; + return (Array.isArray(value) && value.length > 0) || (!Array.isArray(value) && value) ? _defineProperty({}, key, value) : {} } function classList(props) { - var _classes; - var classes = (_classes = { - 'fa-spin': props.spin, - 'fa-pulse': props.pulse, - 'fa-fw': props.fixedWidth, - 'fa-border': props.border, - 'fa-li': props.listItem, - 'fa-inverse': props.inverse, - 'fa-flip': props.flip === true, - 'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both', - 'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both' - }, _defineProperty(_classes, "fa-".concat(props.size), props.size !== null), _defineProperty(_classes, "fa-rotate-".concat(props.rotation), props.rotation !== null), _defineProperty(_classes, "fa-pull-".concat(props.pull), props.pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _defineProperty(_classes, 'fa-bounce', props.bounce), _defineProperty(_classes, 'fa-shake', props.shake), _defineProperty(_classes, 'fa-beat', props.beat), _defineProperty(_classes, 'fa-fade', props.fade), _defineProperty(_classes, 'fa-beat-fade', props.beatFade), _defineProperty(_classes, 'fa-flash', props.flash), _defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), _defineProperty(_classes, 'fa-spin-reverse', props.spinReverse), _classes); - return Object.keys(classes).map(function (key) { - return classes[key] ? key : null; - }).filter(function (key) { - return key; - }); + var _classes + var classes = + ((_classes = { + 'fa-spin': props.spin, + 'fa-pulse': props.pulse, + 'fa-fw': props.fixedWidth, + 'fa-border': props.border, + 'fa-li': props.listItem, + 'fa-inverse': props.inverse, + 'fa-flip': props.flip === true, + 'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both', + 'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both' + }), + _defineProperty(_classes, 'fa-'.concat(props.size), props.size !== null), + _defineProperty(_classes, 'fa-rotate-'.concat(props.rotation), props.rotation !== null), + _defineProperty(_classes, 'fa-pull-'.concat(props.pull), props.pull !== null), + _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), + _defineProperty(_classes, 'fa-bounce', props.bounce), + _defineProperty(_classes, 'fa-shake', props.shake), + _defineProperty(_classes, 'fa-beat', props.beat), + _defineProperty(_classes, 'fa-fade', props.fade), + _defineProperty(_classes, 'fa-beat-fade', props.beatFade), + _defineProperty(_classes, 'fa-flash', props.flash), + _defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), + _defineProperty(_classes, 'fa-spin-reverse', props.spinReverse), + _classes) + return Object.keys(classes) + .map(function (key) { + return classes[key] ? key : null + }) + .filter(function (key) { + return key + }) } function normalizeIconArgs(icon) { - if (icon && _typeof(icon) === "object" && icon.prefix && icon.iconName && icon.icon) { - return icon; + if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) { + return icon } if (fontawesomeSvgCore.parse.icon) { - return fontawesomeSvgCore.parse.icon(icon); + return fontawesomeSvgCore.parse.icon(icon) } if (icon === null) { - return null; + return null } - if (_typeof(icon) === "object" && icon.prefix && icon.iconName) { - return icon; + if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) { + return icon } if (Array.isArray(icon) && icon.length === 2) { return { prefix: icon[0], iconName: icon[1] - }; + } } - if (typeof icon === "string") { + if (typeof icon === 'string') { return { - prefix: "fas", + prefix: 'fas', iconName: icon - }; + } } } var FontAwesomeIcon = vue.defineComponent({ - name: "FontAwesomeIcon", + name: 'FontAwesomeIcon', props: { border: { type: Boolean, @@ -412,7 +468,7 @@ type: [Boolean, String], default: false, validator: function validator(value) { - return [true, false, "horizontal", "vertical", "both"].indexOf(value) > -1; + return [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1 } }, icon: { @@ -435,7 +491,7 @@ type: String, default: null, validator: function validator(value) { - return ["right", "left"].indexOf(value) > -1; + return ['right', 'left'].indexOf(value) > -1 } }, pulse: { @@ -446,7 +502,7 @@ type: [String, Number], default: null, validator: function validator(value) { - return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1; + return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1 } }, swapOpacity: { @@ -457,7 +513,7 @@ type: String, default: null, validator: function validator(value) { - return ["2xs", "xs", "sm", "lg", "xl", "2xl", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"].indexOf(value) > -1; + return ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1 } }, spin: { @@ -518,42 +574,53 @@ } }, setup: function setup(props, _ref) { - var attrs = _ref.attrs; + var attrs = _ref.attrs var icon = vue.computed(function () { - return normalizeIconArgs(props.icon); - }); + return normalizeIconArgs(props.icon) + }) var classes = vue.computed(function () { - return objectWithKey("classes", classList(props)); - }); + return objectWithKey('classes', classList(props)) + }) var transform = vue.computed(function () { - return objectWithKey("transform", typeof props.transform === "string" ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform); - }); + return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform) + }) var mask = vue.computed(function () { - return objectWithKey("mask", normalizeIconArgs(props.mask)); - }); + return objectWithKey('mask', normalizeIconArgs(props.mask)) + }) var renderedIcon = vue.computed(function () { - return fontawesomeSvgCore.icon(icon.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, { - symbol: props.symbol, - title: props.title, - titleId: props.titleId, - maskId: props.maskId - })); - }); - vue.watch(renderedIcon, function (value) { - if (!value) { - return log("Could not find one or more icon(s)", icon.value, mask.value); + return fontawesomeSvgCore.icon( + icon.value, + _objectSpread2( + _objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), + {}, + { + symbol: props.symbol, + title: props.title, + titleId: props.titleId, + maskId: props.maskId + } + ) + ) + }) + vue.watch( + renderedIcon, + function (value) { + if (!value) { + return log('Could not find one or more icon(s)', icon.value, mask.value) + } + }, + { + immediate: true } - }, { - immediate: true - }); + ) var vnode = vue.computed(function () { - return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null; - }); + return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null + }) return function () { - return vnode.value; - }; + return vnode.value + } } - }); + }) var FontAwesomeLayers = vue.defineComponent({ name: 'FontAwesomeLayers', @@ -564,18 +631,22 @@ } }, setup: function setup(props, _ref) { - var slots = _ref.slots; - var familyPrefix = fontawesomeSvgCore.config.familyPrefix; + var slots = _ref.slots + var familyPrefix = fontawesomeSvgCore.config.familyPrefix var className = vue.computed(function () { - return ["".concat(familyPrefix, "-layers")].concat(_toConsumableArray(props.fixedWidth ? ["".concat(familyPrefix, "-fw")] : [])); - }); + return [''.concat(familyPrefix, '-layers')].concat(_toConsumableArray(props.fixedWidth ? [''.concat(familyPrefix, '-fw')] : [])) + }) return function () { - return vue.h('div', { - class: className.value - }, slots.default ? slots.default() : []); - }; + return vue.h( + 'div', + { + class: className.value + }, + slots.default ? slots.default() : [] + ) + } } - }); + }) var FontAwesomeLayersText = vue.defineComponent({ name: 'FontAwesomeLayersText', @@ -596,40 +667,45 @@ type: String, default: null, validator: function validator(value) { - return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1; + return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1 } } }, setup: function setup(props, _ref) { - var attrs = _ref.attrs; - var familyPrefix = fontawesomeSvgCore.config.familyPrefix; + var attrs = _ref.attrs + var familyPrefix = fontawesomeSvgCore.config.familyPrefix var classes = vue.computed(function () { - return objectWithKey('classes', [].concat(_toConsumableArray(props.counter ? ["".concat(familyPrefix, "-layers-counter")] : []), _toConsumableArray(props.position ? ["".concat(familyPrefix, "-layers-").concat(props.position)] : []))); - }); + return objectWithKey( + 'classes', + [].concat( + _toConsumableArray(props.counter ? [''.concat(familyPrefix, '-layers-counter')] : []), + _toConsumableArray(props.position ? [''.concat(familyPrefix, '-layers-').concat(props.position)] : []) + ) + ) + }) var transform = vue.computed(function () { - return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform); - }); + return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform) + }) var abstractElement = vue.computed(function () { var _text = fontawesomeSvgCore.text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)), - abstract = _text.abstract; + abstract = _text.abstract if (props.counter) { - abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', ''); + abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '') } - return abstract[0]; - }); + return abstract[0] + }) var vnode = vue.computed(function () { - return convert(abstractElement.value, {}, attrs); - }); + return convert(abstractElement.value, {}, attrs) + }) return function () { - return vnode.value; - }; + return vnode.value + } } - }); - - exports.FontAwesomeIcon = FontAwesomeIcon; - exports.FontAwesomeLayers = FontAwesomeLayers; - exports.FontAwesomeLayersText = FontAwesomeLayersText; + }) - Object.defineProperty(exports, '__esModule', { value: true }); + exports.FontAwesomeIcon = FontAwesomeIcon + exports.FontAwesomeLayers = FontAwesomeLayers + exports.FontAwesomeLayersText = FontAwesomeLayersText -})); + Object.defineProperty(exports, '__esModule', { value: true }) +}) diff --git a/src/components/FontAwesomeIcon.js b/src/components/FontAwesomeIcon.js index 028a79c8..912b8d54 100644 --- a/src/components/FontAwesomeIcon.js +++ b/src/components/FontAwesomeIcon.js @@ -1,192 +1,154 @@ -import { - parse as faParse, - icon as faIcon, -} from "@fortawesome/fontawesome-svg-core"; -import { defineComponent, computed, watch } from "vue"; -import convert from "../converter"; -import log from "../logger"; -import { objectWithKey, classList } from "../utils"; +import { parse as faParse, icon as faIcon } from '@fortawesome/fontawesome-svg-core' +import { defineComponent, computed, watch } from 'vue' +import convert from '../converter' +import log from '../logger' +import { objectWithKey, classList } from '../utils' function normalizeIconArgs(icon) { - if ( - icon && - typeof icon === "object" && - icon.prefix && - icon.iconName && - icon.icon - ) { - return icon; + if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) { + return icon } if (faParse.icon) { - return faParse.icon(icon); + return faParse.icon(icon) } if (icon === null) { - return null; + return null } - if (typeof icon === "object" && icon.prefix && icon.iconName) { - return icon; + if (typeof icon === 'object' && icon.prefix && icon.iconName) { + return icon } if (Array.isArray(icon) && icon.length === 2) { - return { prefix: icon[0], iconName: icon[1] }; + return { prefix: icon[0], iconName: icon[1] } } - if (typeof icon === "string") { - return { prefix: "fas", iconName: icon }; + if (typeof icon === 'string') { + return { prefix: 'fas', iconName: icon } } } export default defineComponent({ - name: "FontAwesomeIcon", + name: 'FontAwesomeIcon', props: { border: { type: Boolean, - default: false, + default: false }, fixedWidth: { type: Boolean, - default: false, + default: false }, flip: { type: [Boolean, String], default: false, - validator: (value) => - [true, false, "horizontal", "vertical", "both"].indexOf(value) > -1, + validator: (value) => [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1 }, icon: { type: [Object, Array, String], - required: true, + required: true }, mask: { type: [Object, Array, String], - default: null, + default: null }, maskId: { type: String, - default: null, + default: null }, listItem: { type: Boolean, - default: false, + default: false }, pull: { type: String, default: null, - validator: (value) => ["right", "left"].indexOf(value) > -1, + validator: (value) => ['right', 'left'].indexOf(value) > -1 }, pulse: { type: Boolean, - default: false, + default: false }, rotation: { type: [String, Number], default: null, - validator: (value) => - [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1, + validator: (value) => [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1 }, swapOpacity: { type: Boolean, - default: false, + default: false }, size: { type: String, default: null, - validator: (value) => - [ - "2xs", - "xs", - "sm", - "lg", - "xl", - "2xl", - "1x", - "2x", - "3x", - "4x", - "5x", - "6x", - "7x", - "8x", - "9x", - "10x", - ].indexOf(value) > -1, + validator: (value) => ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1 }, spin: { type: Boolean, - default: false, + default: false }, transform: { type: [String, Object], - default: null, + default: null }, symbol: { type: [Boolean, String], - default: false, + default: false }, title: { type: String, - default: null, + default: null }, titleId: { type: String, - default: null, + default: null }, inverse: { type: Boolean, - default: false, + default: false }, bounce: { type: Boolean, - default: false, + default: false }, shake: { type: Boolean, - default: false, + default: false }, beat: { type: Boolean, - default: false, + default: false }, fade: { type: Boolean, - default: false, + default: false }, beatFade: { type: Boolean, - default: false, + default: false }, flash: { type: Boolean, - default: false, + default: false }, spinPulse: { type: Boolean, - default: false, + default: false }, spinReverse: { type: Boolean, - default: false, - }, + default: false + } }, setup(props, { attrs }) { - const icon = computed(() => normalizeIconArgs(props.icon)); - const classes = computed(() => objectWithKey("classes", classList(props))); - const transform = computed(() => - objectWithKey( - "transform", - typeof props.transform === "string" - ? faParse.transform(props.transform) - : props.transform - ) - ); - const mask = computed(() => - objectWithKey("mask", normalizeIconArgs(props.mask)) - ); + const icon = computed(() => normalizeIconArgs(props.icon)) + const classes = computed(() => objectWithKey('classes', classList(props))) + const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? faParse.transform(props.transform) : props.transform)) + const mask = computed(() => objectWithKey('mask', normalizeIconArgs(props.mask))) const renderedIcon = computed(() => faIcon(icon.value, { @@ -196,29 +158,21 @@ export default defineComponent({ symbol: props.symbol, title: props.title, titleId: props.titleId, - maskId: props.maskId, + maskId: props.maskId }) - ); + ) watch( renderedIcon, (value) => { if (!value) { - return log( - "Could not find one or more icon(s)", - icon.value, - mask.value - ); + return log('Could not find one or more icon(s)', icon.value, mask.value) } }, { immediate: true } - ); + ) - const vnode = computed(() => - renderedIcon.value - ? convert(renderedIcon.value.abstract[0], {}, attrs) - : null - ); - return () => vnode.value; - }, -}); + const vnode = computed(() => (renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null)) + return () => vnode.value + } +}) diff --git a/src/components/__tests__/FontAwesomeIcon.test.js b/src/components/__tests__/FontAwesomeIcon.test.js index cd3877ca..2cb1bcb0 100644 --- a/src/components/__tests__/FontAwesomeIcon.test.js +++ b/src/components/__tests__/FontAwesomeIcon.test.js @@ -2,372 +2,333 @@ * @jest-environment jsdom */ -import { library } from "@fortawesome/fontawesome-svg-core"; -import { faClose, faUser } from "@fortawesome/free-solid-svg-icons"; -import { faCoffee, faCircle, faAlien } from "../__fixtures__/icons"; -import { - compileAndMount, - mountFromProps, - coreHasFeature, - REFERENCE_ICON_USING_STRING, - REFERENCE_ICON_BY_STYLE, - REFERENCE_ICON_USING_FAMILY, - ICON_ALIASES, -} from "../__fixtures__/helpers"; -import FontAwesomeIcon from "../FontAwesomeIcon"; +import { library } from '@fortawesome/fontawesome-svg-core' +import { faClose, faUser } from '@fortawesome/free-solid-svg-icons' +import { faCoffee, faCircle, faAlien } from '../__fixtures__/icons' +import { compileAndMount, mountFromProps, coreHasFeature, REFERENCE_ICON_USING_STRING, REFERENCE_ICON_BY_STYLE, ICON_ALIASES } from '../__fixtures__/helpers' +import FontAwesomeIcon from '../FontAwesomeIcon' beforeEach(() => { - library.add(faCoffee, faCircle, faAlien); -}); + library.add(faCoffee, faCircle, faAlien) +}) afterEach(() => { - library.reset(); -}); + library.reset() +}) -describe("icon title prop", () => { - test("checks title attribute is null when title property is NOT st", () => { +describe('icon title prop', () => { + test('checks title attribute is null when title property is NOT st', () => { const wrapper = mountFromProps({ - icon: faCoffee, - }); + icon: faCoffee + }) - expect(wrapper.element.getAttribute("aria-labelledby")).toBeFalsy(); - expect(wrapper.element.querySelector("title")).toBeFalsy(); - }); + expect(wrapper.element.getAttribute('aria-labelledby')).toBeFalsy() + expect(wrapper.element.querySelector('title')).toBeFalsy() + }) - test("checks title attributes when title property is set", () => { + test('checks title attributes when title property is set', () => { const wrapper = mountFromProps({ icon: faCoffee, - title: "Drink your caf", - titleId: "caf-1138", - }); + title: 'Drink your caf', + titleId: 'caf-1138' + }) - expect(wrapper.element.getAttribute("aria-labelledby")).toBe( - "svg-inline--fa-title-caf-1138" - ); + expect(wrapper.element.getAttribute('aria-labelledby')).toBe('svg-inline--fa-title-caf-1138') - expect(wrapper.element.querySelector("title").textContent).toBe( - "Drink your caf" - ); + expect(wrapper.element.querySelector('title').textContent).toBe('Drink your caf') - expect(wrapper.element.querySelector("title").id).toBe( - "svg-inline--fa-title-caf-1138" - ); - }); -}); + expect(wrapper.element.querySelector('title').id).toBe('svg-inline--fa-title-caf-1138') + }) +}) -describe("icons are showing", () => { - test("using array format, short prefix and short icon name", () => { - const wrapper = mountFromProps({ icon: ["fas", "coffee"] }); +describe('icons are showing', () => { + test('using array format, short prefix and short icon name', () => { + const wrapper = mountFromProps({ icon: ['fas', 'coffee'] }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-coffee")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy() + }) if (coreHasFeature(REFERENCE_ICON_BY_STYLE)) { - test("using array format, short prefix and long icon name", () => { - const wrapper = mountFromProps({ icon: ["fas", "fa-coffee"] }); + test('using array format, short prefix and long icon name', () => { + const wrapper = mountFromProps({ icon: ['fas', 'fa-coffee'] }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-coffee")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy() + }) - test("using array format, long prefix and long icon name", () => { - const wrapper = mountFromProps({ icon: ["fa-solid", "fa-coffee"] }); + test('using array format, long prefix and long icon name', () => { + const wrapper = mountFromProps({ icon: ['fa-solid', 'fa-coffee'] }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-coffee")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy() + }) - test("using array format, long prefix and short icon name", () => { - const wrapper = mountFromProps({ icon: ["fa-duotone", "alien"] }); + test('using array format, long prefix and short icon name', () => { + const wrapper = mountFromProps({ icon: ['fa-duotone', 'alien'] }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-alien")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-alien')).toBeTruthy() + }) } if (coreHasFeature(REFERENCE_ICON_USING_STRING)) { - test("using string format, with long prefix and long icon name", () => { - const wrapper = mountFromProps({ icon: "fa-duotone fa-alien" }); + test('using string format, with long prefix and long icon name', () => { + const wrapper = mountFromProps({ icon: 'fa-duotone fa-alien' }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-alien")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-alien')).toBeTruthy() + }) - test("using string format, with short prefix and long icon name", () => { - const wrapper = mountFromProps({ icon: "fad fa-alien" }); + test('using string format, with short prefix and long icon name', () => { + const wrapper = mountFromProps({ icon: 'fad fa-alien' }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-alien")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-alien')).toBeTruthy() + }) } - test("using string format, icon name only", () => { - const wrapper = mountFromProps({ icon: "coffee" }); + test('using string format, icon name only', () => { + const wrapper = mountFromProps({ icon: 'coffee' }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-coffee")).toBeTruthy(); - }); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy() + }) - test("missing icon", () => { - const wrapper = mountFromProps({ icon: ["fas", "noicon"] }); + test('missing icon', () => { + const wrapper = mountFromProps({ icon: ['fas', 'noicon'] }) - expect(wrapper.element.tagName).toBeFalsy(); - }); + expect(wrapper.element.tagName).toBeFalsy() + }) - test("using iconDefinition", () => { - const wrapper = mountFromProps({ icon: faCoffee }); + test('using iconDefinition', () => { + const wrapper = mountFromProps({ icon: faCoffee }) - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-coffee")).toBeTruthy(); - }); -}); + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy() + }) +}) -describe("unrelated Vue data options", () => { - test("with extra static class", () => { +describe('unrelated Vue data options', () => { + test('with extra static class', () => { const wrapper = compileAndMount({ template: '', data() { - return { icon: faCoffee }; + return { icon: faCoffee } }, components: { - FontAwesomeIcon, - }, - }); + FontAwesomeIcon + } + }) - expect(wrapper.element.classList.contains("extra")).toBeTruthy(); - }); + expect(wrapper.element.classList.contains('extra')).toBeTruthy() + }) - test("with extra bound class", () => { + test('with extra bound class', () => { const wrapper = compileAndMount({ template: ``, data() { - return { icon: faCoffee }; + return { icon: faCoffee } }, components: { - FontAwesomeIcon, - }, - }); + FontAwesomeIcon + } + }) - expect(wrapper.element.classList.contains("extra1")).toBeTruthy(); - expect(wrapper.element.classList.contains("extra2")).toBeTruthy(); - }); + expect(wrapper.element.classList.contains('extra1')).toBeTruthy() + expect(wrapper.element.classList.contains('extra2')).toBeTruthy() + }) - test("with extra style", () => { + test('with extra style', () => { const wrapper = compileAndMount({ template: ``, data() { - return { icon: faCoffee }; + return { icon: faCoffee } }, components: { - FontAwesomeIcon, - }, - }); + FontAwesomeIcon + } + }) - expect(wrapper.element.style.getPropertyValue("font-size")).toBe("42px"); - }); + expect(wrapper.element.style.getPropertyValue('font-size')).toBe('42px') + }) - test("with extra DOM property", () => { + test('with extra DOM property', () => { const wrapper = compileAndMount({ template: ``, data() { - return { icon: faCoffee }; + return { icon: faCoffee } }, components: { - FontAwesomeIcon, - }, - }); + FontAwesomeIcon + } + }) - expect(wrapper.element.getAttribute("rel")).toBe("local"); - }); + expect(wrapper.element.getAttribute('rel')).toBe('local') + }) - test("with listener", async () => { - let hasBeenClicked = false; + test('with listener', async () => { + let hasBeenClicked = false const wrapper = compileAndMount({ template: '', data() { - return { icon: faCoffee }; + return { icon: faCoffee } }, methods: { clicked() { - hasBeenClicked = true; - }, + hasBeenClicked = true + } }, components: { - FontAwesomeIcon, - }, - }); + FontAwesomeIcon + } + }) + + expect(hasBeenClicked).toBeFalsy() + await wrapper.trigger('click') + expect(hasBeenClicked).toBeTruthy() + }) +}) + +test('using border', () => { + const wrapper = mountFromProps({ icon: faCoffee, border: true }) + + expect(wrapper.element.classList.contains('fa-border')).toBeTruthy() +}) + +test('using fixedWidth', () => { + const wrapper = mountFromProps({ icon: faCoffee, fixedWidth: true }) + + expect(wrapper.element.classList.contains('fa-fw')).toBeTruthy() +}) + +describe('using flip', () => { + test('flip', () => { + const wrapper = mountFromProps({ icon: faCoffee, flip: true }) + + expect(wrapper.element.classList.contains('fa-flip')).toBeTruthy() + expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeFalsy() + expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeFalsy() + expect(wrapper.element.classList.contains('fa-flip-both')).toBeFalsy() + }) + + test('horizontal', () => { + const wrapper = mountFromProps({ icon: faCoffee, flip: 'horizontal' }) + + expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeTruthy() + expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeFalsy() + expect(wrapper.element.classList.contains('fa-flip-both')).toBeFalsy() + expect(wrapper.element.classList.contains('fa-flip')).toBeFalsy() + }) + + test('vertical', () => { + const wrapper = mountFromProps({ icon: faCoffee, flip: 'vertical' }) + + expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeTruthy() + expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeFalsy() + expect(wrapper.element.classList.contains('fa-flip-both')).toBeFalsy() + expect(wrapper.element.classList.contains('fa-flip')).toBeFalsy() + }) + + test('both', () => { + const wrapper = mountFromProps({ icon: faCoffee, flip: 'both' }) + + expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeTruthy() + expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeTruthy() + expect(wrapper.element.classList.contains('fa-flip')).toBeFalsy() + }) +}) + +test('using listItem', () => { + const wrapper = mountFromProps({ icon: faCoffee, listItem: true }) + + expect(wrapper.element.classList.contains('fa-li')).toBeTruthy() +}) + +describe('using pull', () => { + test('right', () => { + const wrapper = mountFromProps({ icon: faCoffee, pull: 'right' }) + + expect(wrapper.element.classList.contains('fa-pull-right')).toBeTruthy() + }) + + test('left', () => { + const wrapper = mountFromProps({ icon: faCoffee, pull: 'left' }) - expect(hasBeenClicked).toBeFalsy(); - await wrapper.trigger("click"); - expect(hasBeenClicked).toBeTruthy(); - }); -}); + expect(wrapper.element.classList.contains('fa-pull-left')).toBeTruthy() + }) +}) -test("using border", () => { - const wrapper = mountFromProps({ icon: faCoffee, border: true }); +test('using pulse', () => { + const wrapper = mountFromProps({ icon: faCoffee, pulse: true }) - expect(wrapper.element.classList.contains("fa-border")).toBeTruthy(); -}); + expect(wrapper.element.classList.contains('fa-pulse')).toBeTruthy() +}) -test("using fixedWidth", () => { - const wrapper = mountFromProps({ icon: faCoffee, fixedWidth: true }); +describe('using rotation', () => { + test('90', () => { + const wrapper = mountFromProps({ icon: faCoffee, rotation: 90 }) - expect(wrapper.element.classList.contains("fa-fw")).toBeTruthy(); -}); + expect(wrapper.element.classList.contains('fa-rotate-90')).toBeTruthy() + }) -describe("using flip", () => { - test("flip", () => { - const wrapper = mountFromProps({ icon: faCoffee, flip: true }); + test('180', () => { + const wrapper = mountFromProps({ icon: faCoffee, rotation: 180 }) - expect(wrapper.element.classList.contains("fa-flip")).toBeTruthy(); - expect(wrapper.element.classList.contains("fa-flip-vertical")).toBeFalsy(); - expect( - wrapper.element.classList.contains("fa-flip-horizontal") - ).toBeFalsy(); - expect(wrapper.element.classList.contains("fa-flip-both")).toBeFalsy(); - }); - - test("horizontal", () => { - const wrapper = mountFromProps({ icon: faCoffee, flip: "horizontal" }); - - expect( - wrapper.element.classList.contains("fa-flip-horizontal") - ).toBeTruthy(); - expect(wrapper.element.classList.contains("fa-flip-vertical")).toBeFalsy(); - expect(wrapper.element.classList.contains("fa-flip-both")).toBeFalsy(); - expect(wrapper.element.classList.contains("fa-flip")).toBeFalsy(); - }); - - test("vertical", () => { - const wrapper = mountFromProps({ icon: faCoffee, flip: "vertical" }); - - expect(wrapper.element.classList.contains("fa-flip-vertical")).toBeTruthy(); - expect( - wrapper.element.classList.contains("fa-flip-horizontal") - ).toBeFalsy(); - expect(wrapper.element.classList.contains("fa-flip-both")).toBeFalsy(); - expect(wrapper.element.classList.contains("fa-flip")).toBeFalsy(); - }); - - test("both", () => { - const wrapper = mountFromProps({ icon: faCoffee, flip: "both" }); - - expect( - wrapper.element.classList.contains("fa-flip-horizontal") - ).toBeTruthy(); - expect(wrapper.element.classList.contains("fa-flip-vertical")).toBeTruthy(); - expect(wrapper.element.classList.contains("fa-flip")).toBeFalsy(); - }); -}); - -test("using listItem", () => { - const wrapper = mountFromProps({ icon: faCoffee, listItem: true }); - - expect(wrapper.element.classList.contains("fa-li")).toBeTruthy(); -}); - -describe("using pull", () => { - test("right", () => { - const wrapper = mountFromProps({ icon: faCoffee, pull: "right" }); - - expect(wrapper.element.classList.contains("fa-pull-right")).toBeTruthy(); - }); - - test("left", () => { - const wrapper = mountFromProps({ icon: faCoffee, pull: "left" }); - - expect(wrapper.element.classList.contains("fa-pull-left")).toBeTruthy(); - }); -}); - -test("using pulse", () => { - const wrapper = mountFromProps({ icon: faCoffee, pulse: true }); - - expect(wrapper.element.classList.contains("fa-pulse")).toBeTruthy(); -}); - -describe("using rotation", () => { - test("90", () => { - const wrapper = mountFromProps({ icon: faCoffee, rotation: 90 }); - - expect(wrapper.element.classList.contains("fa-rotate-90")).toBeTruthy(); - }); - - test("180", () => { - const wrapper = mountFromProps({ icon: faCoffee, rotation: 180 }); - - expect(wrapper.element.classList.contains("fa-rotate-180")).toBeTruthy(); - }); - - test("270", () => { - const wrapper = mountFromProps({ icon: faCoffee, rotation: 270 }); - - expect(wrapper.element.classList.contains("fa-rotate-270")).toBeTruthy(); - }); - - test("as a string", () => { - const wrapper = mountFromProps({ icon: faCoffee, rotation: "90" }); - - expect(wrapper.element.classList.contains("fa-rotate-90")).toBeTruthy(); - }); -}); - -test("swap opacity", () => { - const wrapper = mountFromProps({ icon: faCoffee, swapOpacity: true }); - - expect(wrapper.element.classList.contains("fa-swap-opacity")).toBeTruthy(); -}); - -test("using size", () => { - [ - "2xs", - "xs", - "sm", - "lg", - "xl", - "2xl", - "1x", - "2x", - "3x", - "4x", - "5x", - "6x", - "7x", - "8x", - "9x", - "10x", - ].forEach((size) => { - const wrapper = mountFromProps({ icon: faCoffee, size: size }); - - expect(wrapper.element.classList.contains(`fa-${size}`)).toBeTruthy(); - }); -}); - -test("using spin", () => { - const wrapper = mountFromProps({ icon: faCoffee, spin: true }); - - expect(wrapper.element.classList.contains("fa-spin")).toBeTruthy(); -}); + expect(wrapper.element.classList.contains('fa-rotate-180')).toBeTruthy() + }) -test("using inverse", () => { - const wrapper = mountFromProps({ icon: faCoffee, inverse: true }); + test('270', () => { + const wrapper = mountFromProps({ icon: faCoffee, rotation: 270 }) - expect(wrapper.element.classList.contains("fa-inverse")).toBeTruthy(); -}); + expect(wrapper.element.classList.contains('fa-rotate-270')).toBeTruthy() + }) -describe("using transform", () => { - test("string", () => { + test('as a string', () => { + const wrapper = mountFromProps({ icon: faCoffee, rotation: '90' }) + + expect(wrapper.element.classList.contains('fa-rotate-90')).toBeTruthy() + }) +}) + +test('swap opacity', () => { + const wrapper = mountFromProps({ icon: faCoffee, swapOpacity: true }) + + expect(wrapper.element.classList.contains('fa-swap-opacity')).toBeTruthy() +}) + +test('using size', () => { + ;['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].forEach((size) => { + const wrapper = mountFromProps({ icon: faCoffee, size: size }) + + expect(wrapper.element.classList.contains(`fa-${size}`)).toBeTruthy() + }) +}) + +test('using spin', () => { + const wrapper = mountFromProps({ icon: faCoffee, spin: true }) + + expect(wrapper.element.classList.contains('fa-spin')).toBeTruthy() +}) + +test('using inverse', () => { + const wrapper = mountFromProps({ icon: faCoffee, inverse: true }) + + expect(wrapper.element.classList.contains('fa-inverse')).toBeTruthy() +}) + +describe('using transform', () => { + test('string', () => { const wrapper = mountFromProps({ icon: faCoffee, - transform: "grow-40 left-4 rotate-15", - }); + transform: 'grow-40 left-4 rotate-15' + }) - expect(wrapper.element).toBeTruthy(); - }); + expect(wrapper.element).toBeTruthy() + }) - test("object", () => { + test('object', () => { const wrapper = mountFromProps({ icon: faCoffee, transform: { @@ -376,210 +337,160 @@ describe("using transform", () => { rotate: 15, size: 56, x: -4, - y: 0, - }, - }); - - expect(wrapper.element).toBeTruthy(); - }); -}); + y: 0 + } + }) -describe("mask", () => { - test("will add icon", () => { - const wrapper = mountFromProps({ icon: faCoffee, mask: faCircle }); + expect(wrapper.element).toBeTruthy() + }) +}) - expect(wrapper.element.innerHTML).toMatch(/clipPath/); - }); -<<<<<<< HEAD -}); +describe('mask', () => { + test('will add icon', () => { + const wrapper = mountFromProps({ icon: faCoffee, mask: faCircle }) -======= + expect(wrapper.element.innerHTML).toMatch(/clipPath/) + }) - test("will add icon referencing library", () => { + test('will add icon referencing library', () => { const wrapper = mountFromProps({ - icon: ["fas", "coffee"], - mask: ["fas", "circle"], - }); + icon: ['fas', 'coffee'], + mask: ['fas', 'circle'] + }) // TODO: missing assertion here - }); -}); + }) +}) ->>>>>>> 3072263 (add tests checking for title prop) -describe("symbol", () => { - test("will not create a symbol", () => { - const wrapper = mountFromProps({ icon: faCoffee }); - - expect(wrapper.element.style.getPropertyValue("display")).toBe(""); - }); +describe('symbol', () => { + test('will not create a symbol', () => { + const wrapper = mountFromProps({ icon: faCoffee }) - test("will create a symbol", () => { - const wrapper = mountFromProps({ icon: faCoffee, symbol: "coffee-icon" }); + expect(wrapper.element.style.getPropertyValue('display')).toBe('') + }) - expect(wrapper.element.style.getPropertyValue("display")).toBe("none"); - expect(wrapper.element.children[0].tagName).toBe("symbol"); - }); -}); + test('will create a symbol', () => { + const wrapper = mountFromProps({ icon: faCoffee, symbol: 'coffee-icon' }) -describe("title", () => { - test("using title", () => { - const wrapper = mountFromProps({ icon: faCoffee, title: "Coffee" }); + expect(wrapper.element.style.getPropertyValue('display')).toBe('none') + expect(wrapper.element.children[0].tagName).toBe('symbol') + }) +}) - expect(wrapper.element.getElementsByTagName("title")[0].innerHTML).toBe( - "Coffee" - ); - }); +describe('title', () => { + test('using title', () => { + const wrapper = mountFromProps({ icon: faCoffee, title: 'Coffee' }) - test("not using title", () => { - const wrapper = mountFromProps({ icon: faCoffee }); + expect(wrapper.element.getElementsByTagName('title')[0].innerHTML).toBe('Coffee') + }) - expect(wrapper.element.getElementsByTagName("title").length).toBe(0); - }); -}); + test('not using title', () => { + const wrapper = mountFromProps({ icon: faCoffee }) -describe("reactivity", () => { - test("changing props should update the element", async () => { - const wrapper = mountFromProps({ icon: faCoffee, title: "Coffee" }); + expect(wrapper.element.getElementsByTagName('title').length).toBe(0) + }) +}) - expect(wrapper.element.classList.contains("fa-coffee")).toBeTruthy(); - expect(wrapper.element.getElementsByTagName("title")[0].innerHTML).toBe( - "Coffee" - ); +describe('reactivity', () => { + test('changing props should update the element', async () => { + const wrapper = mountFromProps({ icon: faCoffee, title: 'Coffee' }) - await wrapper.setProps({ icon: faCircle, title: "Circle" }); + expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy() + expect(wrapper.element.getElementsByTagName('title')[0].innerHTML).toBe('Coffee') - expect(wrapper.element.classList.contains("fa-circle")).toBeTruthy(); - expect(wrapper.element.getElementsByTagName("title")[0].innerHTML).toBe( - "Circle" - ); - }); -}); + await wrapper.setProps({ icon: faCircle, title: 'Circle' }) -describe("using bounce", () => { - test("bounce", () => { - const wrapper = mountFromProps({ icon: faCoffee, bounce: true }); + expect(wrapper.element.classList.contains('fa-circle')).toBeTruthy() + expect(wrapper.element.getElementsByTagName('title')[0].innerHTML).toBe('Circle') + }) +}) - expect(wrapper.element.classList.contains("fa-bounce")).toBeTruthy(); - }); -}); +describe('using bounce', () => { + test('bounce', () => { + const wrapper = mountFromProps({ icon: faCoffee, bounce: true }) -describe("using shake", () => { - test("shake", () => { - const wrapper = mountFromProps({ icon: faCoffee, shake: true }); + expect(wrapper.element.classList.contains('fa-bounce')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-shake")).toBeTruthy(); - }); -}); +describe('using shake', () => { + test('shake', () => { + const wrapper = mountFromProps({ icon: faCoffee, shake: true }) -describe("using beat", () => { - test("beat", () => { - const wrapper = mountFromProps({ icon: faCoffee, beat: true }); + expect(wrapper.element.classList.contains('fa-shake')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-beat")).toBeTruthy(); - }); -}); +describe('using beat', () => { + test('beat', () => { + const wrapper = mountFromProps({ icon: faCoffee, beat: true }) -describe("using fade", () => { - test("fade", () => { - const wrapper = mountFromProps({ icon: faCoffee, fade: true }); + expect(wrapper.element.classList.contains('fa-beat')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-fade")).toBeTruthy(); - }); -}); +describe('using fade', () => { + test('fade', () => { + const wrapper = mountFromProps({ icon: faCoffee, fade: true }) -describe("using beat-fade", () => { - test("beat-fade", () => { - const wrapper = mountFromProps({ icon: faCoffee, beatFade: true }); + expect(wrapper.element.classList.contains('fa-fade')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-beat-fade")).toBeTruthy(); - }); -}); +describe('using beat-fade', () => { + test('beat-fade', () => { + const wrapper = mountFromProps({ icon: faCoffee, beatFade: true }) -describe("using flash", () => { - test("flash", () => { - const wrapper = mountFromProps({ icon: faCoffee, flash: true }); + expect(wrapper.element.classList.contains('fa-beat-fade')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-flash")).toBeTruthy(); - }); -}); +describe('using flash', () => { + test('flash', () => { + const wrapper = mountFromProps({ icon: faCoffee, flash: true }) -describe("using spin-pulse", () => { - test("spin-pulse", () => { - const wrapper = mountFromProps({ icon: faCoffee, spinPulse: true }); + expect(wrapper.element.classList.contains('fa-flash')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-spin-pulse")).toBeTruthy(); - }); -}); +describe('using spin-pulse', () => { + test('spin-pulse', () => { + const wrapper = mountFromProps({ icon: faCoffee, spinPulse: true }) -describe("using spin-reverse", () => { - test("spin-reverse", () => { - const wrapper = mountFromProps({ icon: faCoffee, spinReverse: true }); + expect(wrapper.element.classList.contains('fa-spin-pulse')).toBeTruthy() + }) +}) - expect(wrapper.element.classList.contains("fa-spin-reverse")).toBeTruthy(); - }); -}); +describe('using spin-reverse', () => { + test('spin-reverse', () => { + const wrapper = mountFromProps({ icon: faCoffee, spinReverse: true }) -test("using imported object from svg icons package", () => { - const wrapper = mountFromProps({ icon: faUser }); + expect(wrapper.element.classList.contains('fa-spin-reverse')).toBeTruthy() + }) +}) - expect(wrapper.element.tagName).toBe("svg"); -}); +test('using imported object from svg icons package', () => { + const wrapper = mountFromProps({ icon: faUser }) + + expect(wrapper.element.tagName).toBe('svg') +}) if (coreHasFeature(ICON_ALIASES)) { - test("find a free-solid-svg-icon with array format", () => { - library.reset(); - library.add(faClose); - const wrapper = mountFromProps({ icon: ["fas", "xmark"] }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-xmark")).toBeTruthy(); - }); - - test("find a free-solid-svg-icon that is an alias", () => { - library.reset(); - library.add(faClose); - const wrapper = mountFromProps({ icon: ["fas", "close"] }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-xmark")).toBeTruthy(); - }); + test('find a free-solid-svg-icon with array format', () => { + library.reset() + library.add(faClose) + const wrapper = mountFromProps({ icon: ['fas', 'xmark'] }) + + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-xmark')).toBeTruthy() + }) + + test('find a free-solid-svg-icon that is an alias', () => { + library.reset() + library.add(faClose) + const wrapper = mountFromProps({ icon: ['fas', 'close'] }) + + expect(wrapper.element.tagName).toBe('svg') + expect(wrapper.element.classList.contains('fa-xmark')).toBeTruthy() + }) } - -describe("using a family", () => { - if (coreHasFeature(REFERENCE_ICON_USING_FAMILY)) { - test("will find a sharp solid icon using array format, short prefix, and short icon name", () => { - const wrapper = mountFromProps({ icon: ["fass", "dog"] }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-dog")).toBeTruthy(); - }); - - test("will find a sharp solid icon using array format, short prefix, and long fa-icon name", () => { - const wrapper = mountFromProps({ icon: ["fass", "fa-dog"] }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-dog")).toBeTruthy(); - }); - - test("will find a sharp solid icon using string format, short prefix, and long fa-icon name", () => { - const wrapper = mountFromProps({ icon: "fass fa-dog" }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-dog")).toBeTruthy(); - }); - - test("will default to a sharp solid icon using string format, long prefix, and long fa-icon name", () => { - const wrapper = mountFromProps({ icon: "fa-sharp fa-dog" }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-dog")).toBeTruthy(); - }); - - test("will find a sharp solid icon using string format, long prefix, long style, and long fa-icon name", () => { - const wrapper = mountFromProps({ icon: "fa-sharp fa-solid fa-dog" }); - - expect(wrapper.element.tagName).toBe("svg"); - expect(wrapper.element.classList.contains("fa-dog")).toBeTruthy(); - }); - } -});