@fortawesome/vue-fontawesome 3.0.0-3 → 3.0.0

package/package.json

@@ -1,8 +1,22 @@
 {
   "name": "@fortawesome/vue-fontawesome",
-  "description": "Official Vue component for Font Awesome 5",
-  "version": "3.0.0-3",
+  "description": "Official Vue component for Font Awesome 6",
+  "version": "3.0.0",
   "main": "index.js",
+  "files": [
+    "README.md",
+    "LICENSE.txt",
+    "UPGRADING.md",
+    "CHANGELOG.md",
+    "index.d.ts",
+    "index.es.js",
+    "index.js",
+    "src/components/**.js",
+    "src/**.js"
+  ],
+  "jest": {
+    "verbose": true
+  },
   "module": "index.es.js",
   "jsnext:main": "index.es.js",
   "types": "index.d.ts",
@@ -21,13 +35,16 @@
     "btaens <github.com/btaens>",
     "David Driscoll <github.com/david-driscoll>",
     "Tyranteon <github.com/tyranteon>",
-    "Vinicius Rangel <github.com/viniciuslrangel>"
+    "Vinicius Rangel <github.com/viniciuslrangel>",
+    "Okke Tijhuis <github.com/otijhuis>"
   ],
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "dist": "cross-env NODE_ENV=production npm run build",
-    "test": "jest --silent",
+    "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",
     "prepack": "npm run dist"
   },
   "lint-staged": {
@@ -37,29 +54,35 @@
     ]
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": ">= 1.2.0 < 1.3",
-    "vue": "3.x"
+    "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+    "vue": ">= 3.0.0 < 4"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@vue/test-utils": "^2.0.0-beta.2",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-3": "^6.24.1",
-    "concurrently": "^4.1.0",
-    "cross-env": "^5.1.1",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-external-helpers": "^7.17.12",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-json-strings": "^7.17.12",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/preset-env": "^7.18.2",
+    "@fortawesome/fontawesome-svg-core": "~6",
+    "@fortawesome/free-solid-svg-icons": "^6",
+    "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": "^1.1.2",
-    "jest": "^23.6.0",
-    "lint-staged": "^8.1.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "lint-staged": "^13.0.0",
     "markdown-toc": "^1.2.0",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "vue": "3.0.0-rc.6"
+    "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": {

package/src/components/FontAwesomeIcon.js

@@ -1,10 +1,18 @@
 import { parse as faParse, icon as faIcon } from '@fortawesome/fontawesome-svg-core'
-import { defineComponent } from 'vue'
+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 (faParse.icon) {
+    return faParse.icon(icon)
+  }
+
   if (icon === null) {
     return null
   }
@@ -35,9 +43,9 @@ export default defineComponent({
       default: false
     },
     flip: {
-      type: String,
-      default: null,
-      validator: (value) => ['horizontal', 'vertical', 'both'].indexOf(value) > -1
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1
     },
     icon: {
       type: [Object, Array, String],
@@ -72,7 +80,7 @@ export default defineComponent({
     size: {
       type: String,
       default: null,
-      validator: (value) => ['lg', 'xs', 'sm', '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,
@@ -93,34 +101,67 @@ export default defineComponent({
     inverse: {
       type: Boolean,
       default: false
-    }
+    },
+    bounce: {
+      type: Boolean,
+      default: false
+    },
+    shake: {
+      type: Boolean,
+      default: false
+    },
+    beat: {
+      type: Boolean,
+      default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    },
+    beatFade: {
+      type: Boolean,
+      default: false
+    },
+    flash: {
+      type: Boolean,
+      default: false
+    },
+    spinPulse: {
+      type: Boolean,
+      default: false
+    },
+    spinReverse: {
+      type: Boolean,
+      default: false
+    },
   },
 
   setup (props, { attrs }) {
-    const { symbol, title } = props
-    const icon = normalizeIconArgs(props.icon)
-    const classes = objectWithKey('classes', classList(props))
-    const transform = objectWithKey(
+    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 = objectWithKey('mask', normalizeIconArgs(props.mask))
+    ))
+    const mask = computed(() => objectWithKey('mask', normalizeIconArgs(props.mask)))
 
-    const renderedIcon = faIcon(icon, {
-      ...classes,
-      ...transform,
-      ...mask,
-      symbol,
-      title
-    })
+    const renderedIcon = computed(() => faIcon(icon.value, {
+      ...classes.value,
+      ...transform.value,
+      ...mask.value,
+      symbol: props.symbol,
+      title: props.title
+    }))
 
-    if (!renderedIcon) {
-      return log('Could not find one or more icon(s)', icon, mask)
-    }
+    watch(renderedIcon, (value) => {
+      if (!value) {
+        return log('Could not find one or more icon(s)', icon.value, mask.value)
+      }
+    }, { immediate: true })
 
-    const abstractElement = renderedIcon.abstract[0]
-    return convert(abstractElement, {}, attrs)
+    const vnode = computed(() => renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null)
+    return () => vnode.value
   }
 })

package/src/components/FontAwesomeLayers.js

@@ -1,5 +1,5 @@
 import { config } from '@fortawesome/fontawesome-svg-core'
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, computed } from 'vue'
 
 export default defineComponent({
   name: 'FontAwesomeLayers',
@@ -14,11 +14,11 @@ export default defineComponent({
   setup (props, { slots }) {
     const { familyPrefix } = config
 
-    const className = [
+    const className = computed(() => [
       `${familyPrefix}-layers`,
       ...(props.fixedWidth ? [`${familyPrefix}-fw`] : [])
-    ]
+    ])
 
-    return () => h('div', { class: className }, slots.default ? slots.default() : [])
+    return () => h('div', { class: className.value }, slots.default ? slots.default() : [])
   }
 })

package/src/components/FontAwesomeLayersText.js

@@ -1,5 +1,5 @@
 import { config, parse, text } from '@fortawesome/fontawesome-svg-core'
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 import convert from '../converter'
 import { objectWithKey } from '../utils'
 
@@ -29,18 +29,21 @@ export default defineComponent({
   setup (props, { attrs }) {
     const { familyPrefix } = config
 
-    const classes = objectWithKey('classes', [
+    const classes = computed(() => objectWithKey('classes', [
       ...(props.counter ? [`${familyPrefix}-layers-counter`] : []),
       ...(props.position ? [`${familyPrefix}-layers-${props.position}`] : [])
-    ])
-    const transform = objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform)
-    const renderedText = text(props.value.toString(), { ...transform, ...classes })
+    ]))
+    const transform = computed(() => objectWithKey('transform', 
+      typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform))
+    const abstractElement = computed(() => {
+      const { abstract } = text(props.value.toString(), { ...transform.value, ...classes.value })
+      if (props.counter) {
+        abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '')
+      }
+      return abstract[0]
+    })
 
-    const { abstract } = renderedText
-    if (props.counter) {
-      abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '')
-    }
-
-    return convert(abstract[0], {}, attrs)
+    const vnode = computed(() => convert(abstractElement.value, {}, attrs))
+    return () => vnode.value
   }
 })

package/src/converter.js

@@ -59,11 +59,11 @@ function combineClassObjects (...collections) {
 }
 
 /**
- * Converts a FontAwesome abstract element of an icon into a Vue render function.
+ * Converts a FontAwesome abstract element of an icon into a Vue VNode.
  * @param {AbstractElement | String} abstractElement The element to convert.
  * @param {Object} props The user-defined props.
  * @param {Object} attrs The user-defined native HTML attributes.
- * @returns {Function | String}
+ * @returns {VNode}
  */
 export default function convert (abstractElement, props = {}, attrs = {}) {
   // If the abstract element is a string, we'll just return a string render function
@@ -71,11 +71,9 @@ export default function convert (abstractElement, props = {}, attrs = {}) {
     return abstractElement
   }
 
-  // Converting abstract element children into Vue render functions, then we'll execute
-  // them to retrieve VDOM elements
+  // Converting abstract element children into Vue VNodes
   const children = (abstractElement.children || [])
     .map(child => convert(child))
-    .map(renderFn => typeof renderFn === 'string' ? renderFn : renderFn())
 
   // Converting abstract element attributes into valid Vue format
   const mixins = Object.keys(abstractElement.attributes || {})
@@ -103,19 +101,18 @@ export default function convert (abstractElement, props = {}, attrs = {}) {
       }
     )
 
-  // Now, we'll return the render function of the 
+  // Now, we'll return the VNode
   const { class: _aClass = {}, style: aStyle = {}, ...otherAttrs } = attrs
 
-  return () =>
-    h(
-      abstractElement.tag,
-      {
-        ...props,
-        class: mixins.class,
-        style: { ...mixins.style, ...aStyle },
-        ...mixins.attrs,
-        ...otherAttrs
-      },
-      children
-    )
+  return h(
+    abstractElement.tag,
+    {
+      ...props,
+      class: mixins.class,
+      style: { ...mixins.style, ...aStyle },
+      ...mixins.attrs,
+      ...otherAttrs
+    },
+    children
+  )
 }

package/src/utils.js

@@ -10,12 +10,21 @@ export function classList (props) {
     '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',
     [`fa-${props.size}`]: props.size !== null,
     [`fa-rotate-${props.rotation}`]: props.rotation !== null,
     [`fa-pull-${props.pull}`]: props.pull !== null,
-    'fa-swap-opacity': props.swapOpacity
+    'fa-swap-opacity': props.swapOpacity,
+    'fa-bounce': props.bounce,
+    'fa-shake': props.shake,
+    'fa-beat': props.beat,
+    'fa-fade': props.fade,
+    'fa-beat-fade': props.beatFade,
+    'fa-flash': props.flash,
+    'fa-spin-pulse': props.spinPulse,
+    'fa-spin-reverse': props.spinReverse
   }
 
   return Object.keys(classes)

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["env", "stage-3"]
-}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,24 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**Reproducible test case**
-Include a URL (codepen.io, jsfiddle.net, Git repository, codesandbox.io, stackblitz.com, etc.) that demonstrates the problem.
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Desktop (please complete the following information):**
- - Browser [e.g. chrome, safari]
- - Version
-
-**Additional context**
-Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

package/.github/workflows/ci.yml

@@ -1,29 +0,0 @@
-name: CI
-
-on: [push]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [8.x, 10.x, 12.x]
-
-    steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: install, build, and test
-      run: |
-        npm install
-        npm run build
-        npm run test
-      env:
-        CI: true
-    - name: dist
-      run: |
-        npm run dist

package/.tool-versions

@@ -1,2 +0,0 @@
-nodejs 10.16.2
-python 3.7.5

package/CODE_OF_CONDUCT.md

@@ -1,74 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at <hello@fontawesome.com>. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at [https://contributor-covenant.org/version/1/4][version]
-
-[homepage]: https://contributor-covenant.org
-[version]: https://contributor-covenant.org/version/1/4/

package/CONTRIBUTING.md

@@ -1,57 +0,0 @@
-This is the repository for the _official_ Font Awesome Angular component, _initialized_ by the team behind Font Awesome,
-but intended to evolve over time with _community_ contributions.
-
-# Ways to Contribute
-
-## Ask a Question
-
-Trying to figure out how to make it work? Or how to use it in your scenario?
-
-1. Review the [README](README.md)
-1. Get familiar with the documentation for the [SVG with JavaScript](https://fontawesome.com/how-to-use/svg-with-js) implementation,
-the framework upon which this component is built. Sometimes the answers you need may be there.
-1. Post any remaining questions on [StackOverflow](https://stackoverflow.com/questions/tagged/vue-fontawesome) with the tag `vue-fontawesome`.
-
-## Report a Bug
-
-1. Create a test case that reproduces the unexpected behavior using [codesandbox.io](https://codesandbox.io)
-1. [Open a new issue with this template](https://github.com/FortAwesome/vue-fontawesome/issues/new?template=bug-report.md),
-and be sure to include a link to the reproduction you made with StackBlitz.
-
-## Submit a Pull Request
-
-Add tests if you add code.
-
-## Everything Else
-
-* [Request a feature](https://github.com/FortAwesome/vue-fontawesome/issues/new??title=Feature%20request:feature-name&template=feature-request.md)
-* [Request a new icon](https://github.com/FortAwesome/Font-Awesome/issues/new?title=Icon%20request:%20icon-name&template=icon-request.md)
-
-# Project Goals
-
-1. Achieve and maintain feature parity with Font Awesome's [SVG with JavaScript](https://fontawesome.com/how-to-use/svg-with-js) method.
-
-1. Keep with best practices in the Angular development community.
-
-1. Stay current with major developments in Angular and Angular-CLI
-
-1. Maintain a reasonable level of consistency between this component and the other Font Awesome official JavaScript
-framework components ([Vue](https://github.com/FortAwesome/angular-fontawesome), [React](https://github.com/FortAwesome/react-fontawesome), [Ember](https://github.com/FortAwesome/ember-fontawesome))
-
-1. Sharing responsibility: The Font Awesome team will continue to be involved in ongoing development, hoping to _propel_
-the project's momentum as we make _our_ contributions, while minimizing any bottle-necking that may happen as we balance
-our own priorities across various projects. Ideally, members of the community will enjoy lending a hand to help keep
-the project moving forward by responding to issues, answering questions on StackOverflow, reviewing and merging pull
-requests, and publishing npm updates.
-
-# Code of Conduct
-
-We'll contribute according to the [Code of Conduct](CODE_OF_CONDUCT.md).
-
-# Wanted: Core Contributors
-
-We're seeking core contributors to help drive this project. Core contributors:
-1. Share these goals
-1. Demonstrate competence through contributions
-1. Contribute with conduct fitting with our code of conduct
-1. Want to make this project awesome

package/DEVELOPMENT.md

@@ -1,46 +0,0 @@
-# Developing vue-fontawesome
-
-## Tasks
-
-The following commands are available through `npm run` or `yarn`:
-
-Command     | Purpose
----         | ---
-build       | Build a development version of the library using Rollup
-dist        | Build a production version of the library using Rollup
-test        | Execute unit tests
-
-## Release this project
-<a name="release"></a>
-
-**During pre release, make sure and use `--tag` and `--npm-dist-tag`**
-
-1. Update `package.json` and change `version`
-1. Update `README.md` and `package.json`; adding any contributors
-1. Update the `CHANGELOG.md`
-1. `npm publish --tag prerelease`
-1. `npm publish --registry --tag prerelease https://npm.fontawesome.com`
-1. `git add .`
-1. `git commit -a -m 'Release VERSION'`
-1. `git push`
-1. Create a [new release](https://github.com/FortAwesome/vue-fontawesome/releases/new) with CHANGELOG details
-
-## Authenticating with the npm.fontawesome.com registry
-
-Contributors with authorization to publish to npm.fontawesome.com will receive an invite
-from a Font Awesome project owner.
-
-1. Respond to the invite in your email
-1. Let the owner know when you've setup your account
-1. Owner will add you to the team
-
-You can then run:
-
-```
-npm login --registry https://npm.fontawesome.com
-```
-
-- The username is the "slug" for your Cloudsmith account. For example mine is "rob-madole".
-- Enter the password that you setup just a few minutes ago.
-- It says the your email is PUBLIC. Pretty sure that's false since the auth is through Cloudsmith.
-- This doesn't overwrite your standard login, just adds to your `~/.npmrc`

package/bin/dev

@@ -1,3 +0,0 @@
-#!/bin/bash
-
-yarn watch

package/bin/setup

@@ -1,8 +0,0 @@
-#!/bin/bash
-
-cd example/webpack
-yarn install
-cd -
-
-yarn install
-yarn build

package/examples/vue-awesome-example/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

package/examples/vue-awesome-example/.editorconfig

@@ -1,7 +0,0 @@
-[*.{js,jsx,ts,tsx,vue}]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true