@fortawesome/vue-fontawesome 0.1.6 → 0.1.10

package/examples/vue-cli-webpack/package.json

@@ -15,7 +15,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.4.2",
     "@fortawesome/free-regular-svg-icons": "^5.4.2",
     "@fortawesome/free-solid-svg-icons": "^5.4.2",
-    "@fortawesome/vue-fontawesome": "^0.1.2",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "vue": "^2.5.2"
   },
   "devDependencies": {
@@ -61,8 +61,8 @@
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-dev-server": "^3.1.11",
     "webpack-merge": "^4.1.0"
   },
   "engines": {

package/examples/vue-cli-webpack/src/App.vue

@@ -23,12 +23,21 @@
           <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>

package/index.d.ts

@@ -1,10 +1,8 @@
-declare module '@fortawesome/vue-fontawesome' {
-  import { FunctionalComponentOptions } from 'vue'
-  import { PropsDefinition } from 'vue/types/options'
-  interface FontAwesomeIconProps { }
-  interface FontAwesomeLayersProps { }
-  interface FontAwesomeLayersTextProps { }
-  export const FontAwesomeIcon: FunctionalComponentOptions<FontAwesomeIconProps, PropsDefinition<FontAwesomeIconProps>>
-  export const FontAwesomeLayers: FunctionalComponentOptions<FontAwesomeLayersProps, PropsDefinition<FontAwesomeLayersProps>>
-  export const FontAwesomeLayersText: FunctionalComponentOptions<FontAwesomeLayersTextProps, PropsDefinition<FontAwesomeLayersTextProps>>
-}
+import { FunctionalComponentOptions, VueConstructor } from 'vue'
+import { PropsDefinition } from 'vue/types/options'
+interface FontAwesomeIconProps { }
+interface FontAwesomeLayersProps { }
+interface FontAwesomeLayersTextProps { }
+export const FontAwesomeIcon: FunctionalComponentOptions<FontAwesomeIconProps, PropsDefinition<FontAwesomeIconProps>> & VueConstructor
+export const FontAwesomeLayers: FunctionalComponentOptions<FontAwesomeLayersProps, PropsDefinition<FontAwesomeLayersProps>>
+export const FontAwesomeLayersText: FunctionalComponentOptions<FontAwesomeLayersTextProps, PropsDefinition<FontAwesomeLayersTextProps>>

package/index.es.js

@@ -309,9 +309,10 @@ function classList(props) {
     'fa-fw': props.fixedWidth,
     'fa-border': props.border,
     'fa-li': props.listItem,
+    'fa-inverse': props.inverse,
     'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
     'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
-  }, defineProperty(_classes, 'fa-' + props.size, props.size !== null), defineProperty(_classes, 'fa-rotate-' + props.rotation, props.rotation !== null), defineProperty(_classes, 'fa-pull-' + props.pull, props.pull !== null), _classes);
+  }, defineProperty(_classes, 'fa-' + props.size, props.size !== null), defineProperty(_classes, 'fa-rotate-' + props.rotation, props.rotation !== null), defineProperty(_classes, 'fa-pull-' + props.pull, props.pull !== null), defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes);
 
   return Object.keys(classes).map(function (key) {
     return classes[key] ? key : null;
@@ -395,6 +396,10 @@ var FontAwesomeIcon = {
         return [90, 180, 270].indexOf(parseInt(value, 10)) > -1;
       }
     },
+    swapOpacity: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: null,
@@ -417,6 +422,10 @@ var FontAwesomeIcon = {
     title: {
       type: String,
       default: null
+    },
+    inverse: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -484,19 +493,38 @@ var FontAwesomeLayersText = {
     transform: {
       type: [String, Object],
       default: null
+    },
+    counter: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: null,
+      validator: function validator(value) {
+        return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1;
+      }
     }
   },
 
   render: function render(createElement, context) {
+    var familyPrefix = config.familyPrefix;
     var props = context.props;
 
+
+    var classes = objectWithKey('classes', [].concat(toConsumableArray(props.counter ? [familyPrefix + '-layers-counter'] : []), toConsumableArray(props.position ? [familyPrefix + '-layers-' + props.position] : [])));
+
     var transform = objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
 
-    var renderedText = text(props.value.toString(), _extends({}, transform));
+    var renderedText = text(props.value.toString(), _extends({}, transform, classes));
 
     var abstract = renderedText.abstract;
 
 
+    if (props.counter) {
+      abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
+    }
+
     var convertCurry = convert.bind(null, createElement);
 
     return convertCurry(abstract[0], {}, context.data);

package/index.js

@@ -313,9 +313,10 @@
 	    'fa-fw': props.fixedWidth,
 	    'fa-border': props.border,
 	    'fa-li': props.listItem,
+	    'fa-inverse': props.inverse,
 	    'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
 	    'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
-	  }, defineProperty(_classes, 'fa-' + props.size, props.size !== null), defineProperty(_classes, 'fa-rotate-' + props.rotation, props.rotation !== null), defineProperty(_classes, 'fa-pull-' + props.pull, props.pull !== null), _classes);
+	  }, defineProperty(_classes, 'fa-' + props.size, props.size !== null), defineProperty(_classes, 'fa-rotate-' + props.rotation, props.rotation !== null), defineProperty(_classes, 'fa-pull-' + props.pull, props.pull !== null), defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes);
 
 	  return Object.keys(classes).map(function (key) {
 	    return classes[key] ? key : null;
@@ -399,6 +400,10 @@
 	        return [90, 180, 270].indexOf(parseInt(value, 10)) > -1;
 	      }
 	    },
+	    swapOpacity: {
+	      type: Boolean,
+	      default: false
+	    },
 	    size: {
 	      type: String,
 	      default: null,
@@ -421,6 +426,10 @@
 	    title: {
 	      type: String,
 	      default: null
+	    },
+	    inverse: {
+	      type: Boolean,
+	      default: false
 	    }
 	  },
 
@@ -488,19 +497,38 @@
 	    transform: {
 	      type: [String, Object],
 	      default: null
+	    },
+	    counter: {
+	      type: Boolean,
+	      default: false
+	    },
+	    position: {
+	      type: String,
+	      default: null,
+	      validator: function validator(value) {
+	        return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1;
+	      }
 	    }
 	  },
 
 	  render: function render(createElement, context) {
+	    var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
 	    var props = context.props;
 
+
+	    var classes = objectWithKey('classes', [].concat(toConsumableArray(props.counter ? [familyPrefix + '-layers-counter'] : []), toConsumableArray(props.position ? [familyPrefix + '-layers-' + props.position] : [])));
+
 	    var transform = objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
 
-	    var renderedText = fontawesomeSvgCore.text(props.value.toString(), _extends({}, transform));
+	    var renderedText = fontawesomeSvgCore.text(props.value.toString(), _extends({}, transform, classes));
 
 	    var abstract = renderedText.abstract;
 
 
+	    if (props.counter) {
+	      abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
+	    }
+
 	    var convertCurry = convert.bind(null, createElement);
 
 	    return convertCurry(abstract[0], {}, context.data);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 5",
-  "version": "0.1.6",
+  "version": "0.1.10",
   "main": "index.js",
   "module": "index.es.js",
   "jsnext:main": "index.es.js",
@@ -17,7 +17,10 @@
     "SirLamer <github.com/SirLamer>",
     "Liu Xinyu <github.com/meteorlxy>",
     "Xaver Schulz <github.com/schulz3000>",
-    "Yannick Ihmels <github.com/ihmels>"
+    "Yannick Ihmels <github.com/ihmels>",
+    "btaens <github.com/btaens>",
+    "David Driscoll <github.com/david-driscoll>",
+    "Tyranteon <github.com/tyranteon>"
   ],
   "license": "MIT",
   "scripts": {

package/src/components/FontAwesomeIcon.js

@@ -66,6 +66,10 @@ export default {
       default: null,
       validator: (value) => [90, 180, 270].indexOf(parseInt(value, 10)) > -1
     },
+    swapOpacity: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: null,
@@ -86,6 +90,10 @@ export default {
     title: {
       type: String,
       default: null
+    },
+    inverse: {
+      type: Boolean,
+      default: false
     }
   },
 

package/src/components/FontAwesomeLayersText.js

@@ -1,4 +1,4 @@
-import { parse, text } from '@fortawesome/fontawesome-svg-core'
+import { config, parse, text } from '@fortawesome/fontawesome-svg-core'
 import convert from '../converter'
 import { objectWithKey } from '../utils'
 
@@ -15,17 +15,37 @@ export default {
     transform: {
       type: [String, Object],
       default: null
-    }
+    },
+    counter: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: null,
+      validator: (value) => ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1
+    },
   },
 
   render (createElement, context) {
+    const { familyPrefix } = config
     const { props } = context
+
+    const classes = 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 })
+    const renderedText = text(props.value.toString(), { ...transform, ...classes })
 
     const { abstract } = renderedText
 
+    if (props.counter) {
+      abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '')
+    }
+
     const convertCurry = convert.bind(null, createElement)
 
     return convertCurry(abstract[0], {}, context.data)

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

@@ -173,6 +173,12 @@ describe('using rotation', () => {
   })
 })
 
+test('swap opacity', () => {
+  const vm = mountFromProps({ icon: faCoffee, swapOpacity: true })
+
+  expect(vm.$el.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 vm = mountFromProps({ icon: faCoffee, size: size })
@@ -187,6 +193,12 @@ test('using spin', () => {
   expect(vm.$el.classList.contains('fa-spin')).toBeTruthy()
 })
 
+test('using inverse', () => {
+  const vm = mountFromProps({ icon: faCoffee, inverse: true })
+
+  expect(vm.$el.classList.contains('fa-inverse')).toBeTruthy()
+})
+
 describe('using transform', () => {
   test('string', () => {
     const vm = mountFromProps({ icon: faCoffee, transform: 'grow-40 left-4 rotate-15' })

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

@@ -20,10 +20,10 @@ test('simple text', () => {
 })
 
 test('accept number for value', () => {
-    const vm = compileAndMount('<font-awesome-layers-text :value="42" />')
+  const vm = compileAndMount('<font-awesome-layers-text :value="42" />')
 
-    expect(vm.$el.getAttribute('class')).toBe('fa-layers-text')
-    expect(vm.$el.innerHTML).toBe('42')
+  expect(vm.$el.getAttribute('class')).toBe('fa-layers-text')
+  expect(vm.$el.innerHTML).toBe('42')
 })
 
 describe('transform', () => {
@@ -34,3 +34,19 @@ describe('transform', () => {
     expect(vm.$el)
   })
 })
+
+describe('counter', () => {
+  test('simple', () => {
+    const vm = compileAndMount('<font-awesome-layers-text :value="42" :counter="true" />')
+
+    expect(vm.$el.getAttribute('class')).toBe('fa-layers-counter')
+    expect(vm.$el.getAttribute('class')).not.toBe('fa-layers-text')
+    expect(vm.$el.innerHTML).toBe('42')
+  })
+
+  test('position', () => {
+    const vm = compileAndMount('<font-awesome-layers-text value="42" counter position="bottom-right" />')
+
+    expect(vm.$el.getAttribute('class')).toBe('fa-layers-counter fa-layers-bottom-right')
+  })
+})

package/src/utils.js

@@ -9,11 +9,13 @@ export function classList (props) {
     'fa-fw': props.fixedWidth,
     'fa-border': props.border,
     'fa-li': props.listItem,
+    'fa-inverse': props.inverse,
     '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-pull-${props.pull}`]: props.pull !== null,
+    'fa-swap-opacity': props.swapOpacity
   }
 
   return Object.keys(classes)

package/.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,13 +0,0 @@
-### Describe the problem
-
-<!--- What happened? What are you seeing? How did you arrive here? -->
-
-### What did you expect?
-
-<!--- How would you like this to work instead? -->
-
-### Reproducible test case
-
-<!--- Insert a URL to your test case on StackBlitz.com  -->
-
-<!--- Describe any details about the test case that we need to know like "whatever you do, don't click the red button" -->

package/.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,25 +0,0 @@
-### Describe the problem you'd like to see solved or task you'd like to see made easier
-
-<!--- What steps or tasks are you trying to complete along the way? -->
-
-### Is this in relation to an existing part of vue-fontawesome or something new?
-
-<!--- If so, what part of Font Awesome? -->
-
-### What is 1 thing that we can do when building this feature that will guarantee that it is awesome?
-
-<!--- e.g. make the API super-convenient -->
-
-### Why would other vue-fontawesome users care about this?
-
-<!--- e.g. because everyone wants icons that fly  -->
-
-### On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?
-
-<!--- e.g. 5 - "while we're young" -->
-
-### Feature request checklist
-
-- [ ] This is a single feature (i.e. not a re-write of all of Font Awesome)
-- [ ] The title starts with "Feature request: " and is followed by a clear feature name (Ex: `Feature request: moar cowbell`)
-- [ ] I have [searched for existing issues](https://github.com/FortAwesome/vue-fontawesome/issues) and to the best of my knowledge this is not a duplicate

package/.travis.yml

@@ -1,3 +0,0 @@
-language: node_js
-node_js:
-  - 8