@fortawesome/vue-fontawesome 3.0.2 → 3.0.4

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.0.4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.4) - 2023-11-06
+
+### Changed
+
+### Added
+
+- Tests for Sharp Family
+- Ability to include a title prop (github issue #[181](https://github.com/FortAwesome/vue-fontawesome/issues/181))
+- Prettier config file
+
+---
+
+## [3.0.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.3) - 2023-01-24
+
+### Changed
+
+- NPM download `@fortawesome/vue-fontawesome-latest` is now set to Vue 3; to download the Vue 2 package you will have to use `@fortawesome/vue-fontawesome-latest-2`, which is described in our [Vue setup docs](https://fontawesome.com/docs/web/use-with/vue/#_3-add-the-vue-component)
+- CI workflow updated for testing
+- README.md and package.json updated for new contributor
+
+### Added
+
+- Missing TypeScript animations added (github issue #[428](https://github.com/FortAwesome/vue-fontawesome/issues/428))
+- Missing TypeScript sizes added (github issue #[415](https://github.com/FortAwesome/vue-fontawesome/issues/415))
+
 ---
 
 ## [3.0.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.2) - 2022-11-07

package/README.md

@@ -25,6 +25,7 @@
 Official documentation is hosted at fontawesome.com
 
 Helpful Vue links:
+
 - [Add Icons with Vue](https://fontawesome.com/docs/web/use-with/vue/add-icons)
 - [Adding Icon Styling with Vue](https://fontawesome.com/docs/web/use-with/vue/style)
 
@@ -34,12 +35,12 @@ To find the Vue setup, go to our [Web docs](https://fontawesome.com/docs/web) an
 
 Review the following docs before diving in:
 
-* [CONTRIBUTING.md](CONTRIBUTING.md)
-* [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
+- [CONTRIBUTING.md](CONTRIBUTING.md)
+- [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
 
 And then:
 
-* Check the existing [issues](https://github.com/FortAwesome/vue-fontawesome/issues) and see if you can help!
+- Check the existing [issues](https://github.com/FortAwesome/vue-fontawesome/issues) and see if you can help!
 
 ## Contributors
 
@@ -60,6 +61,7 @@ being awesome contributors to this project. **We'd like to take a moment to reco
 | <img src="https://github.com/viniciuslrangel.png?size=72" /> | Vinicius Rangel | [@viniciuslrangel](https://github.com/viniciuslrangel) |
 | <img src="https://github.com/otijhuis.png?size=72" />        | Okke Tijhuis    | [@otijhuis](https://github.com/otijhuis)               |
 | <img src="https://github.com/parkeyparker.png?size=72" />    | Aaron Parker    | [@parkeyparker](https://github.com/parkeyparker)       |
+| <img src="https://github.com/brandon-mork.png?size=72" />    | Brandon Mork    | [@brandon-mork](https://github.com/brandon-mork)       |
 
 If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
 

package/index.d.ts

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { DefineComponent } from 'vue'
 
 interface FontAwesomeIconProps {
@@ -7,17 +7,26 @@ interface FontAwesomeIconProps {
   flip?: 'horizontal' | 'vertical' | 'both'
   icon: object | Array<string> | string | IconDefinition
   mask?: object | Array<string> | string
+  maskId?: object | Array<string> | string
   listItem?: boolean
   pull?: 'right' | 'left'
   pulse?: boolean
   rotation?: 90 | 180 | 270 | '90' | '180' | '270'
   swapOpacity?: boolean
-  size?: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'
+  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 {

package/index.es.js

@@ -32,6 +32,7 @@ function _typeof(obj) {
   }, _typeof(obj);
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -96,6 +97,20 @@ function _arrayLikeToArray(arr, len) {
 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.");
 }
+function _toPrimitive(input, hint) {
+  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.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  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 : {};
 
@@ -405,6 +420,10 @@ var FontAwesomeIcon = defineComponent({
       type: [Object, Array, String],
       default: null
     },
+    maskId: {
+      type: String,
+      default: null
+    },
     listItem: {
       type: Boolean,
       default: false
@@ -454,6 +473,10 @@ var FontAwesomeIcon = defineComponent({
       type: String,
       default: null
     },
+    titleId: {
+      type: String,
+      default: null
+    },
     inverse: {
       type: Boolean,
       default: false
@@ -508,7 +531,9 @@ var FontAwesomeIcon = defineComponent({
     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
+        title: props.title,
+        titleId: props.titleId,
+        maskId: props.maskId
       }));
     });
     watch(renderedIcon, function (value) {

package/index.js

@@ -35,6 +35,7 @@
     }, _typeof(obj);
   }
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -99,6 +100,20 @@
   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.");
   }
+  function _toPrimitive(input, hint) {
+    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.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+  function _toPropertyKey(arg) {
+    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 : {};
 
@@ -408,6 +423,10 @@
         type: [Object, Array, String],
         default: null
       },
+      maskId: {
+        type: String,
+        default: null
+      },
       listItem: {
         type: Boolean,
         default: false
@@ -457,6 +476,10 @@
         type: String,
         default: null
       },
+      titleId: {
+        type: String,
+        default: null
+      },
       inverse: {
         type: Boolean,
         default: false
@@ -511,7 +534,9 @@
       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
+          title: props.title,
+          titleId: props.titleId,
+          maskId: props.maskId
         }));
       });
       vue.watch(renderedIcon, function (value) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 6",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "main": "index.js",
   "files": [
     "README.md",
@@ -37,15 +37,14 @@
     "Tyranteon <github.com/tyranteon>",
     "Vinicius Rangel <github.com/viniciuslrangel>",
     "Okke Tijhuis <github.com/otijhuis>",
-    "Aaron Parker <github.com/parkeyparker>"
+    "Aaron Parker <github.com/parkeyparker>",
+    "Brandon Mork <github.com/brandon-mork>"
   ],
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "dist": "cross-env NODE_ENV=production npm run build",
-    "test": "npm run test.5 && npm run test.6",
-    "test.5": "npm --no-save install @fortawesome/fontawesome-svg-core@1.2.x @fortawesome/free-solid-svg-icons@5.x && jest --silent",
-    "test.6": "npm --no-save install @fortawesome/fontawesome-svg-core@6.x @fortawesome/free-solid-svg-icons@6.x && jest --silent",
+    "test": "jest --silent",
     "prepack": "npm run dist"
   },
   "lint-staged": {
@@ -68,24 +67,26 @@
     "@babel/preset-env": "^7.18.2",
     "@fortawesome/fontawesome-svg-core": "~6",
     "@fortawesome/free-solid-svg-icons": "^6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@vue/test-utils": "^2.0.0-beta.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^28.1.1",
     "concurrently": "^7.2.1",
     "cross-env": "^7.0.3",
     "humps": "^2.0.1",
     "husky": "^8.0.1",
+    "install": "^0.13.0",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "lint-staged": "^13.0.0",
     "markdown-toc": "^1.2.0",
+    "npm": "^10.2.2",
+    "prettier": "^3.0.3",
     "rollup": "^2.75.6",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@vue/test-utils": "^2.0.0-beta.2",
     "vue": "^3"
   },
-  "dependencies": {},
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

package/src/components/FontAwesomeIcon.js

@@ -4,7 +4,7 @@ import convert from '../converter'
 import log from '../logger'
 import { objectWithKey, classList } from '../utils'
 
-function normalizeIconArgs (icon) {
+function normalizeIconArgs(icon) {
   if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
     return icon
   }
@@ -55,6 +55,10 @@ export default defineComponent({
       type: [Object, Array, String],
       default: null
     },
+    maskId: {
+      type: String,
+      default: null
+    },
     listItem: {
       type: Boolean,
       default: false
@@ -98,6 +102,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    titleId: {
+      type: String,
+      default: null
+    },
     inverse: {
       type: Boolean,
       default: false
@@ -133,35 +141,38 @@ export default defineComponent({
     spinReverse: {
       type: Boolean,
       default: false
-    },
+    }
   },
 
-  setup (props, { attrs }) {
+  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 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, {
-      ...classes.value,
-      ...transform.value,
-      ...mask.value,
-      symbol: props.symbol,
-      title: props.title
-    }))
+    const renderedIcon = computed(() =>
+      faIcon(icon.value, {
+        ...classes.value,
+        ...transform.value,
+        ...mask.value,
+        symbol: props.symbol,
+        title: props.title,
+        titleId: props.titleId,
+        maskId: props.maskId
+      })
+    )
 
-    watch(renderedIcon, (value) => {
-      if (!value) {
-        return log('Could not find one or more icon(s)', icon.value, mask.value)
-      }
-    }, { immediate: true })
+    watch(
+      renderedIcon,
+      (value) => {
+        if (!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)
+    const vnode = computed(() => (renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null))
     return () => vnode.value
   }
 })