npm - @fortawesome/vue-fontawesome - Versions diffs - 3.0.0-4 → 3.0.1 - Mend

@fortawesome/vue-fontawesome 3.0.0-4 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/CHANGELOG.md +31 -0
package/README.md +9 -802
package/index.d.ts +1 -1
package/index.es.js +319 -222
package/index.js +651 -554
package/package.json +43 -21
package/src/components/FontAwesomeIcon.js +45 -5
package/src/utils.js +10 -1
package/.babelrc +0 -3
package/.github/ISSUE_TEMPLATE/bug_report.md +0 -24
package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
package/.github/workflows/ci.yml +0 -29
package/.tool-versions +0 -2
package/CODE_OF_CONDUCT.md +0 -74
package/CONTRIBUTING.md +0 -57
package/DEVELOPMENT.md +0 -46
package/bin/dev +0 -3
package/bin/setup +0 -8
package/examples/vue-awesome-example/.browserslistrc +0 -3
package/examples/vue-awesome-example/.editorconfig +0 -7
package/examples/vue-awesome-example/.eslintrc.js +0 -18
package/examples/vue-awesome-example/babel.config.js +0 -5
package/examples/vue-awesome-example/package-lock.json +0 -20468
package/examples/vue-awesome-example/package.json +0 -38
package/examples/vue-awesome-example/public/favicon.ico +0 -0
package/examples/vue-awesome-example/public/index.html +0 -18
package/examples/vue-awesome-example/src/App.vue +0 -74
package/examples/vue-awesome-example/src/main.ts +0 -19
package/examples/vue-awesome-example/src/shims-vue.d.ts +0 -5
package/examples/vue-awesome-example/tsconfig.json +0 -39
package/examples/vue-awesome-example/vue.config.js +0 -3
package/rollup.config.js +0 -55
package/src/components/__fixtures__/helpers.js +0 -10
package/src/components/__fixtures__/icons.js +0 -23
package/src/components/__tests__/FontAwesomeIcon.test.js +0 -299
package/src/components/__tests__/FontAwesomeLayers.test.js +0 -83
package/src/components/__tests__/FontAwesomeLayersText.test.js +0 -94

package/examples/vue-awesome-example/package.json DELETED Viewed

@@ -1,38 +0,0 @@
-{
-  "name": "vue-awesome-example",
-  "version": "2.0.0",
-  "description": "A vue-awesome example project",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-brands-svg-icons": "^5.14.0",
-    "@fortawesome/free-regular-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/vue-fontawesome": "file:../..",
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0-0"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "typescript": "~3.9.3"
-  }
-}

package/examples/vue-awesome-example/public/favicon.ico DELETED Viewed

Binary file

package/examples/vue-awesome-example/public/index.html DELETED Viewed

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

package/examples/vue-awesome-example/src/App.vue DELETED Viewed

@@ -1,74 +0,0 @@
-<template>
-  <div id="app">
-    <main class="w-100 min-vh-100 bg-gray8 white sans-serif pa6 flex flex-column justify-center items-center">
-      <div class="mw8 center overflow-hidden">
-        <h2 class="tc ttu tracked3 b f2 mt0 mb2 teal0 o-30">vue-fontawesome</h2>
-        <ul class="list ma0 pa0 flex flex-row flex-wrap teal4">
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon icon="coffee" size="4x" />
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon :icon="['fas', 'coffee']" flip="horizontal" size="4x" />
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon :icon="['far', 'comment']" size="4x" />
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon icon="child" transform="shrink-4 down-2 right-2" :mask="['fas', 'circle']" size="4x" />
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon :icon="['fab', 'twitter']" size="4x" />
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon :icon="queen" size="4x" />
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-icon :icon="queen" size="4x" inverse/>
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-layers full-width class="fa-4x">
-              <font-awesome-icon :icon="['fas', 'archive']"/>
-              <font-awesome-layers-text class="red8" transform="down-3 shrink-14" value="SECRET" />
-            </font-awesome-layers>
-          </li>
-          <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-layers full-width class="fa-4x">
-              <font-awesome-icon :icon="['fas', 'envelope']"/>
-              <font-awesome-layers-text class="red8" value="1" position="top-right" />
-            </font-awesome-layers>
-          </li>
-        </ul>
-      </div>
-    </main>
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { faChessQueen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
-export default defineComponent({
-  name: 'App',
-  setup () {
-    const queen = computed(() => faChessQueen)
-    return { queen }
-  },
-  components: {
-    FontAwesomeIcon,
-    FontAwesomeLayers,
-    FontAwesomeLayersText
-  }
-})
-</script>
-<style>
-body {
-  margin: 0;
-  padding: 0;
-}
-</style>

package/examples/vue-awesome-example/src/main.ts DELETED Viewed

@@ -1,19 +0,0 @@
-import { createApp } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCoffee, faChild, faCircle, faArchive, faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faComment } from '@fortawesome/free-regular-svg-icons'
-import { faTwitter } from '@fortawesome/free-brands-svg-icons'
-import App from './App.vue'
-library.add(
-  faCoffee,
-  faChild,
-  faCircle,
-  faArchive,
-  faEnvelope,
-  faComment,
-  faTwitter
-)
-createApp(App).mount('#app')

package/examples/vue-awesome-example/src/shims-vue.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import { defineComponent } from 'vue'
-  const component: ReturnType<typeof defineComponent>
-  export default component
-}

package/examples/vue-awesome-example/tsconfig.json DELETED Viewed

@@ -1,39 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

package/examples/vue-awesome-example/vue.config.js DELETED Viewed

@@ -1,3 +0,0 @@
-module.exports = {
-  lintOnSave: false
-}

package/rollup.config.js DELETED Viewed

@@ -1,55 +0,0 @@
-import resolve from 'rollup-plugin-node-resolve'
-import commonJs from 'rollup-plugin-commonjs'
-import babel from 'rollup-plugin-babel'
-const name = 'vue-fontawesome'
-const globals = {
-  '@fortawesome/fontawesome-svg-core': 'FontAwesome'
-}
-export default {
-  external: [
-    '@fortawesome/fontawesome-svg-core',
-    'vue',
-  ],
-  input: 'src/index.js',
-  output: [
-    {
-      name,
-      globals,
-      format: 'umd',
-      exports: 'named',
-      file: 'index.js',
-    },
-    {
-      name,
-      globals,
-      format: 'es',
-      file: 'index.es.js'
-    }
-  ],
-  plugins: [
-    resolve({
-      jsnext: true,
-      main: true
-    }),
-    commonJs({
-      include: 'node_modules/**'
-    }),
-    babel({
-      babelrc: false,
-      presets: [
-        ['env', {
-          debug: true,
-          targets: {"browsers": ["> 1%", "last 2 versions", "ie > 9"]},
-          modules: false
-        }],
-        'stage-3'
-      ],
-      plugins: [
-        'external-helpers'
-      ],
-      exclude: 'node_modules/**'
-    })
-  ]
-}

package/src/components/__fixtures__/helpers.js DELETED Viewed

@@ -1,10 +0,0 @@
-import { mount } from '@vue/test-utils'
-import FontAwesomeIcon from '../FontAwesomeIcon'
-export function compileAndMount (definition, props = {}) {
-  return mount(definition, { props })
-}
-export function mountFromProps (props = {}) {
-  return mount(FontAwesomeIcon, { props })
-}

package/src/components/__fixtures__/icons.js DELETED Viewed

@@ -1,23 +0,0 @@
-export const faCoffee = {
-  prefix: 'fas',
-  iconName: 'coffee',
-  icon: [
-    640,
-    512,
-    [],
-    "f001",
-    "..."
-  ]
-}
-export const faCircle = {
-  prefix: 'fas',
-  iconName: 'circle',
-  icon: [
-    640,
-    512,
-    [],
-    "f002",
-    "..."
-  ]
-}

package/src/components/__tests__/FontAwesomeIcon.test.js DELETED Viewed

@@ -1,299 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCoffee, faCircle } from '../__fixtures__/icons'
-import { compileAndMount, mountFromProps } from '../__fixtures__/helpers'
-import FontAwesomeIcon from '../FontAwesomeIcon'
-beforeEach(() => {
-  library.add(faCoffee, faCircle)
-})
-test('using array format', () => {
-  const wrapper = mountFromProps({ icon: ['fas', 'coffee'] })
-  expect(wrapper.element.tagName).toBe('svg')
-  expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy()
-})
-test('using string format', () => {
-  const wrapper = mountFromProps({ icon: 'coffee' })
-  expect(wrapper.element.tagName).toBe('svg')
-  expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy()
-})
-test('missing icon', () => {
-  const wrapper = mountFromProps({ icon: ['fas', 'noicon'] })
-  expect(wrapper.element.tagName).toBeFalsy()
-})
-test('using iconDefinition', () => {
-  const wrapper = mountFromProps({ icon: faCoffee })
-  expect(wrapper.element.tagName).toBe('svg')
-  expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy()
-})
-describe('unrelated Vue data options', () => {
-  test('with extra static class', () => {
-    const wrapper = compileAndMount({
-      template: '<font-awesome-icon class="extra" :icon="icon" />',
-      data () {
-        return { icon: faCoffee }
-      },
-      components: {
-        FontAwesomeIcon
-      }
-    })
-    expect(wrapper.element.classList.contains('extra')).toBeTruthy()
-  })
-  test('with extra bound class', () => {
-    const wrapper = compileAndMount({
-      template: `<font-awesome-icon :class="['extra1', {'extra2': true}]" :icon="icon" />`,
-      data() {
-        return { icon: faCoffee }
-      },
-      components: {
-        FontAwesomeIcon
-      }
-    })
-    expect(wrapper.element.classList.contains('extra1')).toBeTruthy()
-    expect(wrapper.element.classList.contains('extra2')).toBeTruthy()
-  })
-  test('with extra style', () => {
-    const wrapper = compileAndMount({
-      template: `<font-awesome-icon :style="{'font-size': '42px'}" :icon="icon" />`,
-      data () {
-        return { icon: faCoffee }
-      },
-      components: {
-        FontAwesomeIcon
-      }
-    })
-    expect(wrapper.element.style.getPropertyValue('font-size')).toBe('42px')
-  })
-  test('with extra DOM property', () => {
-    const wrapper = compileAndMount({
-      template: `<font-awesome-icon rel="local" :icon="icon" />`,
-      data () {
-        return { icon: faCoffee }
-      },
-      components: {
-        FontAwesomeIcon
-      }
-    })
-    expect(wrapper.element.getAttribute('rel')).toBe('local')
-  })
-  test('with listener', async () => {
-    let hasBeenClicked = false
-    const wrapper = compileAndMount({
-      template: '<font-awesome-icon @click="clicked" :icon="icon" />',
-      data () {
-        return { icon: faCoffee }
-      },
-      methods: {
-        clicked () {
-          hasBeenClicked = true
-        }
-      },
-      components: {
-        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('horizontal', () => {
-    const wrapper = mountFromProps({ icon: faCoffee, flip: "horizontal" })
-    expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeTruthy()
-  })
-  test('vertical', () => {
-    const wrapper = mountFromProps({ icon: faCoffee, flip: "vertical" })
-    expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeTruthy()
-  })
-  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()
-  })
-})
-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', () => {
-  ['lg', 'xs', 'sm', '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' })
-    expect(wrapper.element).toBeTruthy()
-  })
-  test('object', () => {
-    const wrapper = mountFromProps({ icon: faCoffee, transform: { flipX: false, flipY: false, rotate: 15, size: 56, x: -4, y: 0 } })
-    expect(wrapper.element).toBeTruthy()
-  })
-})
-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', () => {
-    const wrapper = mountFromProps({ icon: ['fas', 'coffee'], mask: ['fas', 'circle'] })
-    // missing assertion here
-  })
-})
-describe('symbol', () => {
-  test("will not create a symbol", () => {
-    const wrapper = mountFromProps({ icon: faCoffee })
-    expect(wrapper.element.style.getPropertyValue('display')).toBe('')
-  })
-  test("will create a symbol", () => {
-    const wrapper = mountFromProps({ icon: faCoffee, symbol: 'coffee-icon' })
-    expect(wrapper.element.style.getPropertyValue('display')).toBe('none')
-    expect(wrapper.element.children[0].tagName).toBe('symbol')
-  })
-})
-describe('title', () => {
-  test('using title', () => {
-    const wrapper = mountFromProps({ icon: faCoffee, title: 'Coffee' })
-    expect(wrapper.element.getElementsByTagName('title')[0].innerHTML).toBe('Coffee')
-  })
-  test('not using title', () => {
-    const wrapper = mountFromProps({ icon: faCoffee })
-    expect(wrapper.element.getElementsByTagName('title').length).toBe(0)
-  })
-})
-describe('reactivity', () => {
-  test('changing props should update the element', async () => {
-    const wrapper = mountFromProps({ icon: faCoffee, title: 'Coffee' })
-    expect(wrapper.element.classList.contains('fa-coffee')).toBeTruthy()
-    expect(wrapper.element.getElementsByTagName('title')[0].innerHTML).toBe('Coffee')
-    await wrapper.setProps({ icon: faCircle, title: 'Circle' })
-    expect(wrapper.element.classList.contains('fa-circle')).toBeTruthy()
-    expect(wrapper.element.getElementsByTagName('title')[0].innerHTML).toBe('Circle')
-  })
-})

package/src/components/__tests__/FontAwesomeLayers.test.js DELETED Viewed

@@ -1,83 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCoffee, faCircle } from '../__fixtures__/icons'
-import { compileAndMount, mountFromProps } from '../__fixtures__/helpers'
-import FontAwesomeLayers from '../FontAwesomeLayers'
-beforeEach(() => {
-  library.add(faCoffee, faCircle)
-})
-test('empty layers', () => {
-  const wrapper = compileAndMount({
-    template: '<font-awesome-layers />',
-    components: {
-      FontAwesomeLayers
-    }
-  })
-  expect(wrapper.element.children.length).toBe(0)
-})
-test('empty layers', () => {
-  const wrapper = compileAndMount({
-    template: '<font-awesome-layers><i /><i /></font-awesome-layers>',
-    components: {
-      FontAwesomeLayers
-    }
-  })
-  expect(wrapper.element.children.length).toBe(2)
-})
-describe('class handling', () => {
-  test('extra static', () => {
-    const wrapper = compileAndMount({
-      template: '<font-awesome-layers class="extra" />',
-      components: {
-        FontAwesomeLayers
-      }
-    })
-    expect(wrapper.element.classList.contains('extra')).toBeTruthy()
-    expect(wrapper.element.classList.contains('fa-layers')).toBeTruthy()
-  })
-  test('extra bound', () => {
-    const wrapper = compileAndMount({
-      template: `<font-awesome-layers :class="['extra']" />`,
-      components: {
-        FontAwesomeLayers
-      }
-    })
-    expect(wrapper.element.getAttribute('class')).toBe('fa-layers extra')
-  })
-  test('fixed width', () => {
-    const wrapper = compileAndMount({
-      template: '<font-awesome-layers fixed-width />',
-      components: {
-        FontAwesomeLayers
-      }
-    })
-    expect(wrapper.element.getAttribute('class')).toBe('fa-layers fa-fw')
-  })
-})
-describe('reactivity', () => {
-  test('changing props should update the element', async () => {
-    const wrapper = compileAndMount({
-      template: '<font-awesome-layers fixed-width />',
-      components: {
-        FontAwesomeLayers
-      }
-    })
-    expect(wrapper.element.getAttribute('class')).toBe('fa-layers fa-fw')
-    await wrapper.setProps({ fixedWidth: false })
-    expect(wrapper.element.getAttribute('class')).toBe('fa-layers')
-  })
-})