FortAwesome
/
vue-fontawesome
mirror of https://github.com/FortAwesome/vue-fontawesome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Aaron Parker 2022-11-03 14:45:04 +00:00 committed by GitHub
parent 49de51dc3d
commit 0260208c69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 10658 additions and 13573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -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.

4
examples/vue-awesome-example/src/App.vue
View File

@ -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>

49
index.d.ts vendored
View File

@ -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>

68
index.es.js
View File

@ -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,35 +42,26 @@ 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;
@ -84,22 +69,17 @@ function _objectWithoutProperties(source, excluded) {
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,19 +255,19 @@ 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.
@ -299,50 +275,44 @@ function classToObject(classes) {
* @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)
@ -350,15 +320,12 @@ function convert(abstractElement) {
}
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,26 +357,21 @@ 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',
@ -418,7 +379,6 @@ function normalizeIconArgs(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 () {

68
index.js
View File

@ -6,17 +6,14 @@
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] : {};
@ -26,10 +23,8 @@
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _typeof(obj) {
"@babel/helpers - typeof";
@ -39,7 +34,6 @@
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, {
@ -51,35 +45,26 @@
} 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;
@ -87,22 +72,17 @@
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);
@ -111,15 +91,11 @@
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.");
}
@ -263,12 +239,12 @@
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();
@ -282,19 +258,19 @@
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.
@ -302,50 +278,44 @@
* @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 vue.h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, {
class: mixins.class,
style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
@ -353,15 +323,12 @@
}
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);
}
}
@ -371,7 +338,6 @@
}
function classList(props) {
var _classes;
var classes = (_classes = {
'fa-spin': props.spin,
'fa-pulse': props.pulse,
@ -394,26 +360,21 @@
if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
return icon;
}
if (fontawesomeSvgCore.parse.icon) {
return fontawesomeSvgCore.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',
@ -421,7 +382,6 @@
};
}
}
var FontAwesomeIcon = vue.defineComponent({
name: 'FontAwesomeIcon',
props: {
@ -626,12 +586,10 @@
});
var abstractElement = vue.computed(function () {
var _text = fontawesomeSvgCore.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 = vue.computed(function () {

24036
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -36,7 +36,8 @@
"David Driscoll <github.com/david-driscoll>",
"Tyranteon <github.com/tyranteon>",
"Vinicius Rangel <github.com/viniciuslrangel>",
"Okke Tijhuis <github.com/otijhuis>"
"Okke Tijhuis <github.com/otijhuis>",
"Aaron Parker <github.com/parkeyparker>"
],
"license": "MIT",
"scripts": {