@fortawesome/vue-fontawesome 3.0.0-1 → 3.0.0-5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 5",
-  "version": "3.0.0-1",
+  "version": "3.0.0-5",
   "main": "index.js",
   "module": "index.es.js",
   "jsnext:main": "index.es.js",
@@ -20,7 +20,9 @@
     "Yannick Ihmels <github.com/ihmels>",
     "btaens <github.com/btaens>",
     "David Driscoll <github.com/david-driscoll>",
-    "Tyranteon <github.com/tyranteon>"
+    "Tyranteon <github.com/tyranteon>",
+    "Vinicius Rangel <github.com/viniciuslrangel>",
+    "Okke Tijhuis <github.com/otijhuis>"
   ],
   "license": "MIT",
   "scripts": {
@@ -36,8 +38,8 @@
     ]
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": ">= 1.2.0 < 1.3",
-    "vue": "3.0.0-rc.6"
+    "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
+    "vue": ">= 3.0.0 < 4"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.0",
@@ -58,7 +60,7 @@
     "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"
+    "vue": "3.0.0"
   },
   "dependencies": {},
   "husky": {

package/rollup.config.js

@@ -9,7 +9,8 @@ const globals = {
 
 export default {
   external: [
-    '@fortawesome/fontawesome-svg-core'
+    '@fortawesome/fontawesome-svg-core',
+    'vue',
   ],
   input: 'src/index.js',
   output: [

package/src/components/FontAwesomeIcon.js

@@ -1,5 +1,5 @@
 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'
@@ -97,30 +97,31 @@ export default defineComponent({
   },
 
   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/components/__tests__/FontAwesomeIcon.test.js

@@ -283,3 +283,17 @@ describe('title', () => {
     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

@@ -64,3 +64,20 @@ describe('class handling', () => {
     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')
+  })
+})

package/src/components/__tests__/FontAwesomeLayersText.test.js

@@ -75,3 +75,20 @@ describe('counter', () => {
     expect(wrapper.element.getAttribute('class')).toBe('fa-layers-counter fa-layers-bottom-right')
   })
 })
+
+describe('reactivity', () => {
+  test('changing props should update the element', async () => {
+    const wrapper = compileAndMount({
+      template: '<font-awesome-layers-text :value="42" :counter="true" />',
+      components: {
+        FontAwesomeLayersText
+      }
+    })
+
+    expect(wrapper.element.innerHTML).toBe('42')
+
+    await wrapper.setProps({ value: 43 })
+
+    expect(wrapper.element.innerHTML).toBe('43')
+  })
+})

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
+  )
 }