fix: Type definitions for Vue 3 Composition API (#355)

`FontAwesomeIcon` and other components needed to be of type `DefineComponent` for Vue 3 Composition API TypeScript support (as per #276). The type definitions for the component props also needed updating to denote required and optional props. Whilst checking which props were required it was noted that the `FontAwesomeLayer` component uses `fixedWidth` but the README and example use `full-width` so these have been updated to match the component code.
FortAwesome · Nov 3, 2022 · 0260208 · 0260208
1 parent 49de51d
commit 0260208
Show file tree

Hide file tree

Showing 7 changed files with 11,245 additions and 14,160 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ And then:
 
 ## Contributors
 
-The following contributors have either hepled to start this project, have contributed
+The following contributors have either helped to start this project, have contributed
 code, are actively maintaining it (including documentation), or in other ways
 being awesome contributors to this project. **We'd like to take a moment to recognize them.**
 
@@ -59,6 +59,7 @@ being awesome contributors to this project. **We'd like to take a moment to reco
 | <img src="https://github.com/rigma.png?size=72" />           | Romain Failla   | [@rigma](https://github.com/rigma)                     |
 | <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)       |
 
 If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
 

diff --git a/examples/vue-awesome-example/src/App.vue b/examples/vue-awesome-example/src/App.vue
@@ -27,13 +27,13 @@
             <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-layers fixed-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-layers fixed-width class="fa-4x">
               <font-awesome-icon :icon="['fas', 'envelope']"/>
               <font-awesome-layers-text class="red8" value="1" position="top-right" />
             </font-awesome-layers>

diff --git a/index.d.ts b/index.d.ts
@@ -1,35 +1,36 @@
-import { ComponentPublicInstance } from 'vue'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { DefineComponent } from 'vue'
 
 interface FontAwesomeIconProps {
-  border: boolean
-  fixedWidth: boolean
-  flip: boolean | 'horizontal' | 'vertical' | 'both'
-  icon: object | Array<string> | string
-  mask: object | Array<string> | string | null
-  listItem: boolean
-  pull: 'right' | 'left' | null
-  pulse: boolean
-  rotation: 90 | 180 | 270 | '90' | '180' | '270' | null
-  swapOpacity: boolean
-  size: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | null
-  spin: boolean
-  transform: object | string | null
-  symbol: boolean | string
-  title: string | null
-  inverse: boolean
+  border?: boolean
+  fixedWidth?: boolean
+  flip?: 'horizontal' | 'vertical' | 'both'
+  icon: object | Array<string> | string | IconDefinition
+  mask?: 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'
+  spin?: boolean
+  transform?: object | string
+  symbol?: boolean | string
+  title?: string
+  inverse?: boolean
 }
 
 interface FontAwesomeLayersProps {
-  fixedWidth: boolean
+  fixedWidth?: boolean
 }
 
 interface FontAwesomeLayersTextProps {
   value: string | number
-  transform: object | string | null
-  counter: boolean
-  position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null
+  transform?: object | string
+  counter?: boolean
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
 }
 
-declare const FontAwesomeIcon: ComponentPublicInstance<FontAwesomeIconProps>
-declare const FontAwesomeLayers: ComponentPublicInstance<FontAwesomeLayersProps>
-declare const FontAwesomeLayersText: ComponentPublicInstance<FontAwesomeLayersTextProps>
+declare const FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>
+declare const FontAwesomeLayers: DefineComponent<FontAwesomeLayersProps>
+declare const FontAwesomeLayersText: DefineComponent<FontAwesomeLayersTextProps>
diff --git a/index.es.js b/index.es.js
@@ -3,17 +3,14 @@ import { h, defineComponent, computed, watch } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -23,10 +20,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -36,7 +31,6 @@ function _typeof(obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
   }, _typeof(obj);
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -48,58 +42,44 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-
   var target = _objectWithoutPropertiesLoose(source, excluded);
-
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
       if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
       target[key] = source[key];
     }
   }
-
   return target;
 }
-
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
-
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -108,15 +88,11 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 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.");
 }
@@ -260,12 +236,12 @@ var humps$1 = {exports: {}};
 var humps = humps$1.exports;
 
 var _excluded = ["class", "style"];
+
 /**
  * Converts a CSS style into a plain Javascript object.
  * @param {String} style The style to converts into a plain Javascript object.
  * @returns {Object}
  */
-
 function styleToObject(style) {
   return style.split(';').map(function (s) {
     return s.trim();
@@ -279,86 +255,77 @@ function styleToObject(style) {
     return output;
   }, {});
 }
+
 /**
  * Converts a CSS class list into a plain Javascript object.
  * @param {Array<String>} classes The class list to convert.
  * @returns {Object}
  */
-
-
 function classToObject(classes) {
   return classes.split(/\s+/).reduce(function (output, className) {
     output[className] = true;
     return output;
   }, {});
 }
+
 /**
  * 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 {VNode}
  */
-
-
 function convert(abstractElement) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
   // If the abstract element is a string, we'll just return a string render function
   if (typeof abstractElement === 'string') {
     return abstractElement;
-  } // Converting abstract element children into Vue VNodes
-
+  }
 
+  // Converting abstract element children into Vue VNodes
   var children = (abstractElement.children || []).map(function (child) {
     return convert(child);
-  }); // Converting abstract element attributes into valid Vue format
+  });
 
+  // Converting abstract element attributes into valid Vue format
   var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) {
     var value = abstractElement.attributes[key];
-
     switch (key) {
       case 'class':
         mixins.class = classToObject(value);
         break;
-
       case 'style':
         mixins.style = styleToObject(value);
         break;
-
       default:
         mixins.attrs[key] = value;
     }
-
     return mixins;
   }, {
     attrs: {},
     class: {},
     style: {}
-  }); // Now, we'll return the VNode
+  });
 
+  // Now, we'll return the VNode
   attrs.class;
-      var _attrs$style = attrs.style,
-      aStyle = _attrs$style === void 0 ? {} : _attrs$style,
-      otherAttrs = _objectWithoutProperties(attrs, _excluded);
-
+    var _attrs$style = attrs.style,
+    aStyle = _attrs$style === void 0 ? {} : _attrs$style,
+    otherAttrs = _objectWithoutProperties(attrs, _excluded);
   return h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, {
     class: mixins.class,
     style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
   }, mixins.attrs), otherAttrs), children);
 }
 
 var PRODUCTION = false;
-
 try {
   PRODUCTION = process.env.NODE_ENV === 'production';
 } catch (e) {}
-
 function log () {
   if (!PRODUCTION && console && typeof console.error === 'function') {
     var _console;
-
     (_console = console).error.apply(_console, arguments);
   }
 }
@@ -368,7 +335,6 @@ function objectWithKey(key, value) {
 }
 function classList(props) {
   var _classes;
-
   var classes = (_classes = {
     'fa-spin': props.spin,
     'fa-pulse': props.pulse,
@@ -391,34 +357,28 @@ function normalizeIconArgs(icon) {
   if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
     return icon;
   }
-
   if (parse.icon) {
     return parse.icon(icon);
   }
-
   if (icon === null) {
     return null;
   }
-
   if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
     return icon;
   }
-
   if (Array.isArray(icon) && icon.length === 2) {
     return {
       prefix: icon[0],
       iconName: icon[1]
     };
   }
-
   if (typeof icon === 'string') {
     return {
       prefix: 'fas',
       iconName: icon
     };
   }
 }
-
 var FontAwesomeIcon = defineComponent({
   name: 'FontAwesomeIcon',
   props: {
@@ -623,12 +583,10 @@ var FontAwesomeLayersText = defineComponent({
     });
     var abstractElement = computed(function () {
       var _text = text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
-          abstract = _text.abstract;
-
+        abstract = _text.abstract;
       if (props.counter) {
         abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
       }
-
       return abstract[0];
     });
     var vnode = computed(function () {